将旧项目从 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)

Python更适合初学者,学习曲线平缓,语法简洁;JavaScript适合前端开发,学习曲线较陡,语法灵活。1.Python语法直观,适用于数据科学和后端开发。2.JavaScript灵活,广泛用于前端和服务器端编程。

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1)C/C 是静态类型语言,需手动管理内存,而JavaScript是动态类型,垃圾回收自动处理。2)C/C 需编译成机器码,JavaScript则为解释型语言。3)JavaScript引入闭包、原型链和Promise等概念,增强了灵活性和异步编程能力。

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互;2)在用户提交数据前进行客户端验证,提高用户体验;3)通过AJAX技术实现与服务器的无刷新通信。

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用,涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

理解JavaScript引擎内部工作原理对开发者重要,因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段;2)执行过程中,引擎会进行动态优化,如内联缓存和隐藏类;3)最佳实践包括避免全局变量、优化循环、使用const和let,以及避免过度使用闭包。

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好,适合初学者,但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大,JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富,但Python适合从官方文档开始,JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda,适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack,适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。 1)C 用于解析JavaScript源码并生成抽象语法树。 2)C 负责生成和执行字节码。 3)C 实现JIT编译器,在运行时优化和编译热点代码,显着提高JavaScript的执行效率。
