web 前端培训从 Vue CLI 怎样迁移到 Vite
为什么要从 Vue CLI 迁移到 Vite？
主要原因是速度。Vite 的开发服务器速度很快。因为它对 JavaScript 模块使用原生浏览器支持，所以服务器的启动时间是即时的。同时这还意味着，无论程序大小如何，热模块更新都会很快，因为不必重建整个 bundle。为了演示，下面一个使用 Vue Cli 和 Vite 创建完全相同的项目进行比较：
启动时间：
Vue CLI-2591 毫秒（超过 2 秒）
Vite-259ms（远低于半秒-快 10 倍）
热更新（HMR）：
Vue CLI-171ms
Vite-基本上是即时的 记住，这只是一个搭建的简单示例。随着项目的增长，Vue CLI 版本的速度会逐渐变慢，而 Vite 却承诺无论项目大小，都能在相同的级别速度上运行。
如何从 Vue CLI 迁移到 Vite
为了解决这个问题，本文使用 Vue CLI 构建了一个全新的项目，将与您一起完成将其转换为 Vite 的步骤。当然，实际工作中通常不会从一个全新的 Vue CLI 项目开始，但很多步骤是通用的。此外，本文选择 Vue2 作为演示，因为大多数人可能仍然在使用 Vue 2。同时，本文也指出了 Vue 3 的不同之处（它比 vue2 迁移更简单）。
第 1 步：更新依赖项
迁移到 Vite 的第一步是更新 package.json 中的依赖项。我们需要删除与 Vue CLI 相关的依赖项。
// package.json
"@vue/cli-plugin-babel": "~4.5.0", // remove
"@vue/cli-plugin-eslint": "~4.5.0", // remove
"@vue/cli-plugin-router": "~4.5.0", // remove
"@vue/cli-plugin-vuex": "~4.5.0", // remove
"@vue/cli-service": "~4.5.0", // remove
我们还可以删除 sass-loader，因为 Vite 内置支持常见的预处理器。我们也可以继续使用自己选择的 CSS 预处理器。但请注意，Vite 建议将原生 CSS 变量与 PostCSS 插件一起使用，编写简单、符合未来标准的 CSS_前端培训。
// package.json
"sass-loader": "^8.0.2" // remove
最后，添加 Vite 作为依赖项，以及 Vite 的 Vue 插件组件，以支持单文件组件。
// package.json
"@vitejs/plugin-vue": "^1.6.1",
"vite": "^2.5.4",
此外，因为我们正在迁移 Vue 2 项目，我们还需要添加社区为 Vue 2 开发的 Vite 插件。如果我们使用 Vue 3，就没有必要这样做。
// package.json
"vite-plugin-vue2" : "1.9.0" // add for Vue 2
安装了 Vite 插件后，我们现在还可以删除 vue 模板编译器，因为 Vite vue 插件有这个功能。
// package.json
"vue-template-compiler": "^2.6.11" //remove (SFC support provided by vite vue plugin)
第 2 步：仅支持现代浏览器
既然 Vite 是下一代的构建工具，所以我们可以只支持现代的浏览器。这将使我们的构建尽可能精简和快速。实际上，这意味着我们可以将 Babel 完全从依赖关系中移除，因为大多数移动和 pc 浏览器几乎完全支持所有 ES6 功能。如果您仍然需要支持 Internet Explorer 11 等较旧的浏览器，Vite 会为此提供一个官方插件。所以，要删除 Babel，首先我们要删除 babel.config.js 文件。接下来，前面我们已经删除了 @vue/cli babel 插件依赖项，我们还需要从 package.json 文件中删除几个其他与 babel 相关的依赖项。
// package.json
"babel-eslint": "^10.1.0", // remove
"core-js": "^3.6.5", // remove
因为已经删除了'babel eslint'，我们还需要在.eslintrc 文件中删除的将其作为解析器的配置 。
// .eslintrc
// remove
parserOptions: {
parser: "babel-eslint",
},
最后，当我们在.eslintrc 我们需要将 env 从 node 更新为'es2021'，因为我们只支持那些现代浏览器。
// .eslintrc
env: {
node: true, // remove
es2021: true,
}
这一操作还将更新 eslint 本身，以及 eslint-plugin-vue 插件，以支持 es2021 环境。
$ npm install eslint@8 eslint-plugin-vue@8
第 3 步：添加 Vite 配置
在这一步中，让我们为 Vue 项目配置 Vite。Vite 通过项目根目录中的 vite.config.js 文件进行配置。以下是使用 npm init vite@latest 命令创建的 Vite 项目默认配置文件。
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()]
})
让我们再增加 2 个配置项。首先，我们将从 vite-plugin-vue2 导入 Vue 插件，而不是官方的 vite-Vue 插件。
// vite.config.js
import vue from '@vitejs/plugin-vue' // remove
import { createVuePlugin as vue } from "vite-plugin-vue2";
//...
如果您使用的是 Vue 3，当然不必这样做。其次，为了让 @别名像在 Vue CLI 中一样工作，我们需要添加下面这个配置项。
// vite.config.js
//...
const path = require("path");
export default defineConfig({
//...
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
});
第 4 步：移动 index.html 文件
与 Vue CLI 不同，Vite 会将 index.html 文件放置在项目的根目录中，而不是 public 目录中，因此需要移动它。在 index.html 我们需要做一些改变。首先，我们需要将<%= htmlWebpackPlugin.options.title %>占位符改为硬编码值。
// index.html
<!--remove-->
<title><%= htmlWebpackPlugin.options.title %></title>
<!--add-->
<title>Hard Coded Title</title>
//...
<!--remove-->
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
<!--add-->
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
我们还需要把“<%=BASE_URL%>”占位符改为绝对路径。
// index.html
<!--remove-->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!--add-->
<link rel="icon" href="/favicon.ico">
最后也是最重要的一点，应用程序不再是自动注入的，所以我们需要像这样引入它：
<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",
请注意，启动开发服务器的命令不再是 serve。Vite 使用 dev 代替，serve 命令用于在本地预览应用。此外，如果启用了 linting，则应更新 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
但是，我们不能现在在 process 变量上的访问环境变量。取而代之的是 import.meta.env 中找。
// router/index.js
base: process.env.BASE_URL, //remove
base: import.meta.env.BASE_URL,
第 7 步：添加.vue 扩展到 SFC
虽然我们新创建的 Vue CLI 项目已经做到了这一点，但我敢打赌，您现有的应用程序可能没有做到这一点。因此，必须确保所有单文件组件的导入都以.vue 结束。
// Home.vue
import HelloWorld from "@/components/HelloWorld.vue"; // .vue is required
可以通过在 vite.config.js 文件中的 resolve.extensions 配置项添加.vue 完成这项配置。
// vite.config.js
//...
export default defineConfig({
plugins: [vue()],
resolve: {
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
//...
},
});
第 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 有多快。
文章来源于前端自习课
关注尚硅谷，轻松学IT 2021.11.23 加入
IT培训 www.atguigu.com
评论