从vue-cli迁移到Vite
进行迁移的主要原因是速度。 Vite 的开发服务器速度很快。 因为它使用原生浏览器支持 JavaScript 模块，所以服务器启动时间是即时的。 该方法还意味着无论应用程序的大小如何，热模块更换都保持快速，因为不必重新构建整个包。
1、更新依赖
迁移到 Vite 的第一步是更新 package.json 中的依赖项。 我们需要删除与 Vue CLI 相关的依赖项。删除如下
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",我们将添加 Vite 作为依赖项，以及 Vite 的 Vue 插件组件，以支持单文件组件。
"@vitejs/plugin-vue": "^1.6.1",
"vite": "^2.5.4",2、仅提供对主流浏览器的支持
由于 Vite 是下一代构建工具，让我们乐观地只支持最新的浏览器。 这将使我们的构建尽可能精简和快速。
实际上，这意味着我们可以完全从依赖项中移除 Babel，因为大多数移动和桌面新版本浏览器几乎完全支持所有 ES6 功能。 如果您仍然需要支持Internet Explorer 11等旧版浏览器，Vite 确实为此提供了官方插件。
所以，要删除 Babel，首先我们要删除 babel.config.js 文件。
接下来，由于我们已经删除了需要 babel 本身的 @vue/cli-plugin-babel 依赖项，我们只需要从package.json 中删除其他几个 babel 相关的依赖项。如下：
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"parserOptions": {
"parser": "@babel/eslint-parser"
},最后，当我们在 .eslintrc 中时，我们需要将环境从 node 更新到 es2021，因为我们只支持那些常青浏览器。
"env": {
"es2021": true
},这种变化也会迫使我们更新 eslint 本身，以及 eslint-plugin-vue 以支持 es2021 环境。
npm install eslint@8 eslint-plugin-vue@83、添加Vite配置
在这一步中，让我们为我们的 Vue.js 项目配置 Vite。 Vite 通过项目根目录下的 vite.config.js 文件进行配置。 这是使用 npm init vite@latest 为 Vue 生成全新的 Vite 项目时默认的 vite.config.js 文件的样子。
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()]
})其次，为了让 @import 别名像在 Vue CLI 中一样工作，我们需要添加这个位。
// vite.config.js
//...
const path = require("path");
export default defineConfig({
//...
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
});4、移动index.html
与 Vue CLI 不同，Vite 实际上将保存 Vue.js 应用程序的 index.html 文件放在项目的根目录而不是公共目录中，因此您需要移动它。
在 index.html 中，您还需要进行一些更改。
首先，我们将 <%=
htmlWebpackPlugin.options.title %> 占位符的实例更改为硬编码值。
// index.html
<%= htmlwebpackplugin.options.title>
Hard Coded Title
//...
We're sorry but <%= htmlwebpackplugin.options.title> doesn't work properly without JavaScript enabled. Please enable it to continue.
We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.
我们还需要用绝对路径替换 <%= base_url> 占位符。
// index.html
最后也是最重要的一点，JavaScript 应用程序不再是自动注入的，所以我们需要像这样包含它：
<script type="module" src="/src/main.js"></script>5、更新脚本
回到 package.json 我们还需要更新脚本。 我们会将旧的 vue-cli-service 命令更改为 Vite 特定命令。
/ package.json
"serve": "vue-cli-service serve", // remove
"build": "vue-cli-service build", // remove
"dev": "vite",
"build": "vite build",
"serve": "vite preview",请注意，启动开发服务器的命令不再提供。 Vite 使用 dev 代替， serve 用于在本地预览生产构建。
此外，如果您启用了 lint，您应该更新 lint 脚本以直接运行 eslint。
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
6、更新环境变量
环境变量在 Vite 中的工作方式与它们在 Vue CLI 中的工作方式之间有很多交叉。 例如，您的 .env 命名约定可以保持不变
.env # loaded in all cases
.env.local # loaded in all cases, ignored by git
.env.[mode] # only loaded in specified mode
.env.[mode].local # only loaded in specified mode, ignored by git但是，您不能再访问流程变量上的环境变量。 相反，它们可以在 import.meta.env 上找到。
// router/index.js
base: process.env.BASE_URL, //remove
base: import.meta.env.BASE_URL,此外，用于使声明客户端暴露的环境变量更明显的 VUE_APP_ 前缀已更改为 VITE_，因此如果您有任何此类环境变量，则必须相应地更新它们。
7、为 SFC 导入添加 .vue 扩展名
虽然我们新创建的 Vue CLI 项目已经这样做了，但我敢打赌，您现有的应用程序可能不会这样做。 因此，您必须确保单个文件组件的所有导入都以 .vue 扩展名结尾。
// Home.vue
import HelloWorld from "@/components/HelloWorld.vue"; // .vue is required如果由于代码库的大小而导致此过程过于繁重，您可以配置 vite，这样就不需要了。 这是通过将 .vue 添加到 vite.config.js 中的 resolve.extensions 配置选项来完成的。 确保您还手动包含所有默认扩展名，尽管此选项会覆盖默认值。（之前的vue.config.js需要重命名为vite.config.js）
// vite.config.js
//...
export default defineConfig({
plugins: [vue()],
resolve: {
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
//...
},
});虽然这可行，但应尽可能避免。 为什么？ 因为根据 Vite 文档：“请注意，不建议省略自定义导入类型（例如 .vue）的扩展，因为它会干扰 IDE 和类型支持。”
8、清理魔法注释
最后，您可以删除所有用于命名动态导入的神奇注释，因为这些是特定于 webpack 的注释，对 Vite 没有任何意义。
// router/index.js
import(
/* webpackChunkName: "about" */ // remove
"../views/About.vue"
),相反，Vite 会根据原始 .vue 文件名和缓存破坏哈希自动命名您的块，如下所示：About.37a9fa9f.js
9、享受更快、更无缝的开发体验
完成上述步骤 1-8 后，您的应用程序应该可以开始使用 Vite 运行了！ 继续用 npm run dev 启动你的开发服务器，看看 Vite 对你自己来说有多快。
如果启动报错参考如下：
删除jsconfig.json文件