Vue-cli 切换至 Vite
前人栽树后人乘凉
既然网上已经有很多的转换经验，为什么不学习一下呢？ juejin.cn/post/714348…
操作一番下来，剩下的就是改错了。
jsx
具体报错：
[vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
项目中在很多地方都使用了 jsx 写法，按照 vite 的意思，jsx 的就要用 jsx 的后缀来标识，但是我们实在是找不到哪些人间使用了 jsx（懒），就 Google 了一份通用配置
let optimizeDeps = {
esbuildOptions: {
plugins: [
{
name: 'load-js-files-as-jsx',
setup(build) {
build.onLoad({ filter: /src\/.*\.js$/ }, async args => ({
loader: 'jsx',
contents: await fs.readFile(args.path, 'utf8'),
}));
},
},
],
},
};
let esbuild = {
loader: 'jsx',
include: /src\/.*\.jsx?$/,
exclude: [],
};
如果用的 ts 和 tsx，那么把 js 替换成 ts 即可。
scss
具体报错：
[vite] Internal server error: [sass] Undefined variable.
因为没有设置全局变量，所以报错。
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "~@/styles/global/index.scss";`,
},
},
},
如果还报错：
[sass] Can't find stylesheet to import.
╷
1 │ @import "~@/styles/global/index.scss";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
那么就是 vite 不认识 ~@ 这个简写，在 alias 里面添加即可。
vue
报错：
[vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
没有安装 vue 的插件。首先，使用以下命令安装 @vitejs/plugin-vue：
npm install -D @vitejs/plugin-vue
在您的vite.config.js文件中引入插件，
import vue from '@vitejs/plugin-vue';
export default {
plugins: [vue()],
// other config options...
};
这样 Vite 就能够正确地解析 .vue 文件并处理其中包含的 js 代码了。
如果在 vue 文件中使用了 jsx，那么还需要安装一个 @vitejs/plugin-vue-jsx 插件，直接使用即可。
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
export default {
plugins: [vue(), vueJsx(),],
// other config options...
};
剩下的基本上都是些小问题：
-
vue 文件中使用了 jsx：给 script 添加属性
lang="jsx"。如果同时使用了 setup，那么也要指定 lang 属性。嫌麻烦就把所有 vue 文件中的<script>替换成<script lang="jsx">。 -
同一个文件夹下有同名不同后缀的文件，引入可能会报错。那么引用时必须指定后缀名。
-
webpack 中如果引用文件夹中
index.js/vue，那么会简写成/path/to/dir，在 vite 中会报错，需要指定文件名才可以/path/to/dir/index.js。 -
worker 处理：不需要
worker-loader了，只需要在 import 的时候加上后缀即可import BuildWorker from '@/path/to/worker?worker';。 -
以前通过
require引入的图片，建议全部替换成new URL('@/assets/logo.png', import.meta.url).href。搜索正则
: import\((['"])([^'"]+)\1\)，替换正则: new URL('$2', import.meta.url).href。 -
require.context在 vite 中是未定义的，需要替换成import.meta.glob('./*.js', { eager: true })。不要用
import.meta.globEager，已经被废弃。
