将旧项目从 Vue CLI 迁移到 Vite
最近,我们冲刺中增加了一张工单,目标是减少一个遗留项目中具有严重和高危漏洞的软件包。这项任务涉及将使用 Vue CLI 作为构建工具的 Vue 2 项目迁移到 Vite。
这是一个很好的机会,可以使技术栈现代化,并利用 Vite 提供的性能优势。在本文中,我将分享我完成迁移所遵循的主要步骤。
什么是 Vite?
Vite(发音为“veet”)是一个构建工具,旨在为现代 Web 项目提供更快(而且速度确实很快)和更精简的开发体验。
使用 Vite,您可以获得显着缩短的构建时间、极快的开发服务器和简化的配置过程。
迁移步骤
1. 更新 package.json
第一步是从项目中删除所有 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>
2. 设置 Vite
与许多其他库一样,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>
3. 移动和更新 index.html
在 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 是因为我们不再自动注入。
4. 更新环境变量
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>
5. 更新脚本
最后,我更新了 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中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

Python和JavaScript开发者的薪资没有绝对的高低,具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大,薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网(https://www.shiseido.co.jp/sb/wonderland/)中�...

学习JavaScript不难,但有挑战。1)理解基础概念如变量、数据类型、函数等。2)掌握异步编程,通过事件循环实现。3)使用DOM操作和Promise处理异步请求。4)避免常见错误,使用调试技巧。5)优化性能,遵循最佳实践。

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中?在处理数据时,我们常常会遇到需要将具有相同ID�...

探索前端中类似VSCode的面板拖拽调整功能的实现在前端开发中,如何实现类似于VSCode...
