最近，我们冲刺中增加了一张工单，目标是减少一个遗留项目中具有严重和高危漏洞的软件包。这项任务涉及将使用 Vue CLI 作为构建工具的 Vue 2 项目迁移到 Vite。
这是一个很好的机会，可以使技术栈现代化，并利用 Vite 提供的性能优势。在本文中，我将分享我完成迁移所遵循的主要步骤。
Vite（发音为“veet”）是一个构建工具，旨在为现代 Web 项目提供更快（而且速度确实很快）和更精简的开发体验。
使用 Vite，您可以获得显着缩短的构建时间、极快的开发服务器和简化的配置过程。
第一步是从项目中删除所有 Vue CLI 依赖项。这包括 Babel 相关的包、babel.config.js 配置文件和 core-js 依赖项。
<code>//package.json "@vue/cli-plugin-babel": "~5.0.8", //remove "@vue/cli-plugin-e2e-nightwatch": "~5.0.8", //remove "@vue/cli-plugin-eslint": "~5.0.8", //remove "@vue/cli-plugin-unit-jest": "~5.0.8", //remove "@vue/cli-service": "~5.0.8", //remove "core-js": "^3.6.4", //remove "@babel/core": "^7.8.4", //remove "babel-core": "^7.0.0-bridge.0", //remove "babel-jest": "^25.1.0", //remove </code>
如果您的 ESLint 配置使用 "babel-eslint" 作为解析器，则需要替换它。
<code>//package.json "babel-eslint": "^10.0.3", //remove</code>
我将我的 ESLint 配置从 .eslintrc 迁移到现代的 eslint.config.mjs 格式，并将 ESLint 更新到版本 8，我强烈推荐这样做。
<code>npm install eslint@8 eslint-plugin-vue@8 --save-dev npx @eslint/migrate-config .eslintrc.js</code>
清理这些依赖项后，我添加了 Vite 和一个用于 Vue 集成的插件：
<code>npm install vite @vitejs/plugin-vue2 --save-dev</code>
与许多其他库一样，Vite 使用项目根目录中的配置文件 (vite.config.js) 来定义构建和开发选项。这是一个简单的起点：
<code>import { defineConfig } from 'vite'
import vue2 from '@vitejs/plugin-vue2'
export default defineConfig({
plugins: [vue2()],
resolve: {
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
});</code>在 Vue CLI 中，index.html 文件通常位于 public 文件夹中。但是，Vite 期望它位于项目的根目录。将文件移动到根目录并根据需要更新任何路径引用。
<code>mv public/index.html index.html</code>
<code><link href="<%= BASE_URL %>favicon.ico" rel="icon"></link> <link href="/favicon.ico" rel="icon"></link></code>
包含 main.js 是因为我们不再自动注入。
Vite 以不同的方式处理环境变量。确保更新或创建 .env 文件，并为要公开的所有变量添加 VITE_ 前缀。例如：
<code>VITE_API_URL=https://api.example.com</code>
<code>// router/index.js //remove base: process.env.BASE_URL, //add base: import.meta.env.BASE_URL,</code>
最后，我更新了 package.json 中的脚本，以便使用 Vite 二进制文件而不是 Vue CLI。它们现在看起来是这样的：
<code>//from
"scripts": {
"serve": "vue-cli-service serve --port 8084",
"dev": "npm run serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e --headless",
"lint": "vue-cli-service lint",
"test": "npm run test:unit && npm run test:e2e"
},
//to
"scripts": {
"serve": "vite --port 8084",
"dev": "npm run serve",
"build": "vite build",
"test:e2e": "nightwatch --headless",
"test:unit": "vitest --run",
"test": "npm run test:unit && npm run test:e2e",
"lint": "eslint ."
},</code>通过这些更改，您现在可以使用 Vite 运行您的 Vue 2 项目，并享受它带来的所有好处，尤其是改进的构建性能。
在我的下一篇文章中，我将分享如何在没有 Vue CLI 插件的情况下启用 Nightwatch，并将 Jest 迁移到 Vitest。敬请关注！
如果您有任何疑问或想分享您自己使用 Vite 的经验，请随时发表评论！ ?
以上是将旧项目从 Vue CLI 迁移到 Vite的详细内容。更多信息请关注PHP中文网其他相关文章！
