require为什么会报错呢？看看🤔面官方的解释
CJS 的 Node API 已经被废弃。当调用
require('vite')时，将会记录一个废弃警告。你应该更新你的文件或框架来导入 Vite 的 ESM 构建。在一个基础的 Vite 项目中，请确保：
vite.config.js配置文件的内容使用 ESM 语法。- 最近的
package.json文件中有"type": "module"，或者使用.mjs/.mts扩展名，例如vite.config.mjs或者.vite.config.mts。对于其他项目，有几种常见的方法：
- 配置 ESM 为默认，如果需要则选择 CJS： 在项目
package.json中添加"type": "module"。所有*.js文件现在都被解释为 ESM，并且需要使用 ESM 语法。你可以将一个文件重命名为.cjs扩展名来继续使用 CJS。- 保持 CJS 为默认，如果需要则选择 ESM： 如果项目
package.json没有"type": "module"，所有*.js文件都被解释为 CJS。你可以将一个文件重命名为.mjs扩展名来使用 ESM。- 动态导入 Vite： 如果你需要继续使用 CJS，你可以使用
import('vite')动态导入 Vite。这要求你的代码必须在一个async上下文中编写，但是由于 Vite 的 API 大多是异步的，所以应该还是可以管理的。查看 排错指南 获取更多信息。
设置src目录别名
和webpack一样，在项目引入静态资源的时候我们也可以直接使用@作为指向src的目录。官方文档
在webpack中我们需要这么配置⬇️
lua
const path = require('path');
module.exports = {
//...
resolve: {
alias: {
Utilities: path.resolve(__dirname, 'src/utilities/'),
Templates: path.resolve(__dirname, 'src/templates/'),
'@': path.resolve(__dirname, 'src/'),
},
},
};通过以上的配置，如果我们需要访问到src/utilities/index.ts文件可以直接简写成Utilities/index.ts，我们想要访问到src下的文件的话可以直接使用@来直接指向src目录。
在vite中中可以这么配置⬇️。官方文档
bash
{
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
}
}同webpack上例子🌰一样使用。
接下来 试试如何在项目中正确的使用静态资源引入
可以去看下Vite官方源于静态资源的的解释。
vite官方关于静态资源引入分为如下几点
常用的静态资源引入
以上是官方给到的解释，我们在配置完成@的别名之后，想要访问src目录下的文件都可以直接import xxx from '@/xx'
在引入静态图片的时候，可以直接这么写⬇️。
文件放在src/assets/images文件夹
javascript
import img1 from '@/assets/images/xxx.jpg'
// 使用的时候可以直接
<img :src="img1" />
// 当然在官方文档中我们也可以显示的引入为url
import img1 from '@/assets/images/xxx.jpg?url'
// 使用同上大多数我们引入静态文件都可以直接使用如上写法。
文件放在public文件夹
如果你将文件放在public文件夹需要注意⚠️以下几点
- 不会被源码引用（例如
robots.txt）- 必须保持原有文件名（没有经过 hash）
- ...或者你压根不想引入该资源，只是想得到其 URL。
如果你没有配置 publicDir默认访问路径为<root>/public，比如你放在pulic的根目录的一个文件名称为img.png。访问的时候可以直接/img.png就可以访问到。
我遇到的问题
我的场景是在vue3中封装📦一个组件，我需要动态设置组件内部的一个dom的背景图片。
我的做法是将需要使用到的背景图片文件统一重命名，然后使用该图片的时候配置一个文件名props就可以访问到。定义一个对象来赋值给到需要更改背景图片的dom。⬇️
ruby
<div :style="style"></div>
const style = {
background: `url(/src/assets/images/${props.fileName})`
}如上写法在dev环境没有任何问题，但是在生产环节找不到地址了。
一脸懵逼的我开始排查。打包后找不到绝地地址/src/assets/xxx，打包之后根目录只有一个assets文件夹所以找不到。
解决方案如下⬇️
javascript
function getImageUrl(name) {
return new URL(`./dir/${name}.png`, import.meta.url).href
}至此完美解决。