vue2迁移到vite[保姆级教程]

vue2迁移到vite[保姆级教程]

  • 使用vue CLI创建项目
  • 进行vite迁移详细步骤
    • 1. 安装 Vite 和 Vue 2 支持插件
    • 2. 创建 vite.config.js
    • 3. 修改 package.json 脚本
    • 4. 创建 index.html
    • 5. 确保 main.js 正确引入
    • 6. 处理静态资源
    • 7. 构建优化（可选）
    • 8. 启动项目
  • 常见问题解决
  • 拓展：彻底告别 Webpack

将Vue 2项目迁移到 Vite 是一个非常明智的选择，因为 Vite 提供了更快的启动速度和热更新。不过，由于 Vite 原生支持的是 Vue 3，因此需要一些额外配置来支持 Vue 2。

本文将使用一个干净的vue2 CLI创建项目进行演示，你也可按照以下步骤进行操作：

使用vue CLI创建项目

使用 Vue CLI 创建 Vue 2 + JS 项目：vue create 项目名称，以下截图为创建项目时的具体选项：
在这里插入图片描述
在这里插入图片描述

项目创建完成后，接下来对这个项目进行vite迁移

进行vite迁移详细步骤

1. 安装 Vite 和 Vue 2 支持插件

npm install --save-dev vite vite-plugin-vue2

如果你使用了 JSX，再加：

npm install --save-dev @vitejs/plugin-vue2-jsx

2. 创建 vite.config.js

在项目根目录创建 vite.config.js：

// vite.config.js
import { defineConfig } from 'vite'
// import vue2 from 'vite-plugin-vue2' // 错误写法：因为它没有 module.exports = function() {} 这种默认导出
import { createVuePlugin } from 'vite-plugin-vue2' // 正确写法
import { resolve } from 'path'export default defineConfig({plugins: [createVuePlugin() // 启用 Vue 2 支持],// 别名配置（和 Vue CLI 一致）resolve: {alias: {'@': resolve(__dirname, 'src'),'@components': resolve(__dirname, 'src/components'),'@views': resolve(__dirname, 'src/views')// 可根据需要添加更多}},// 开发服务器配置server: {host: '0.0.0.0',       // 允许局域网访问port: 3000,            // 默认端口open: true,            // 启动时自动打开浏览器proxy: {// 如果有 API 接口需要代理，例如：// '/api': {//   target: 'http://localhost:8080',//   changeOrigin: true,//   rewrite: (path) => path.replace(/^\/api/, '')// }}},// 构建输出目录（与 Vue CLI 一致）build: {outDir: 'dist',assetsDir: 'static' // 资源文件夹},// SCSS 全局变量注入（可选，非常实用）css: {preprocessorOptions: {scss: {// 引入全局变量和 mixin// additionalData: `//   @import "@/styles/variables.scss";//   @import "@/styles/mixins.scss";// `}}}
})

3. 修改 package.json 脚本

替换原来的 vue-cli-service 命令：

"scripts": {"serve": "vue-cli-service serve","build:serve": "vue-cli-service build","vite": "vite","build": "vite build","preview": "vite preview","lint": "vue-cli-service lint"
}

拓展：可以使用npm run serve，项目迁移完成后可自行选择是否卸载webpack，卸载可以减少项目体积，
卸载命令：npm uninstall @vue/cli-service，执行后，你就无法再使用 webpack 启动项目了。
具体可阅读下文：彻底告别 Webpack

4. 创建 index.html

Vite 需要一个入口index.html文件放在 public/ 或项目根目录(推荐)。

<!-- 项目根目录 -->
<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vue 2 + Vite</title>
</head>
<body>
<div id="app"></div>
<!-- 关键：使用 type="module" 引入 main.js -->
<script type="module" src="/src/main.js"></script>
</body>
</html>

✅ 注意：

  • <script type="module" src="/src/main.js"></script> 是关键，Vite 通过它启动应用。
  • 不需要手动引入 Vue 或其他库，由打包系统处理。

5. 确保 main.js 正确引入

你的 src/main.js 应该类似这样：（通常无需改）

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'// 如果你使用了 Element UI、Vue Router 等，也需要在这里引入Vue.config.productionTip = falsenew Vue({router,store,render: h => h(App)
}).$mount('#app')

6. 处理静态资源

  • 将public下的静态资源保留。
  • src/assets 中的资源可以通过 @/assets/xxx 引用。

7. 构建优化（可选）

如果你使用了 Vuex、Vue Router，无需更改，它们在 Vue 2 中仍然可用。

8. 启动项目

npm run vite

在这里插入图片描述
浏览器自动打开，页面正常显示 ✅

你现在可以愉快地享受 Vite 带来的 飞快启动 和 极速热更新 了！⚡

如果后续遇到路由、静态资源、环境变量等问题，也欢迎提问！
在这里插入图片描述

常见问题解决

Vue 2 不支持 <script setup>：除非你使用unplugin-vue2-script-setup插件。
兼容性问题：某些依赖可能不兼容 ESM，可在 vite.config.js 中配置 optimizeDeps 或 resolve.alias。
环境变量：Vite 使用 import.meta.env，而不是 process.env。你可以通过 .env 文件定义。
推荐 .env 示例：

创建 .env.development文件：

# .env.development
VITE_APP_API_URL=http://localhost:3000/api

创建 .env.production文件：

# .env.production
VITE_APP_API_URL=https://api.example.com

✅ 提示：Vite 只会暴露 VITE_ 开头的变量。

在代码中使用：

console.log(import.meta.env.VITE_APP_API_URL)

拓展：彻底告别 Webpack

当你执行：

npm uninstall @vue/cli-service

之后，你就 无法再使用 webpack 启动项目了。

🔍 详细解释
1. @vue/cli-service 是什么？
它是 Vue CLI 的核心运行时，提供了以下命令：

  • npm run serve → 启动 Webpack 开发服务器
  • npm run build → 使用 Webpack 打包项目
  • npm run lint
    这些功能都由 @vue/cli-service 内部集成的 Webpack、Babel、ESLint 等工具提供支持。

2. 卸载后会发生什么？

操作结果
npm uninstall @vue/cli-service删除了 Webpack 构建系统
执行 npm run serve报错：vue-cli-service: command not found
Webpack 功能完全消失

3.卸载它有什么好处？

好处说明
🔽 减少 node_modules 体积@vue/cli-service 及其依赖很大（~100MB+）
🔐 减少依赖冲突风险少一个大型构建系统，项目更干净
🧹 明确技术栈表明你已正式切换到 Vite，避免团队混淆
⚡ 提升安装速度npm install 更快

🧹 清理残留配置（可选）
为了“断干净”，你可以删除或保留以下文件：

文件是否可以删除说明
babel.config.js✅ 可删Vite 也支持 Babel，但通常不需要单独配置
vue.config.js✅ 可删Vue CLI 的配置，Vite 不读取它
public/index.html❌ 不要删如果你还用它作为静态资源目录
.browserslistrc✅ 可留影响 Babel 和 PostCSS，Vite 也会用到

💡 建议保留 .browserslistrc，因为它影响 CSS 兼容性处理。

🔄 如果你想临时切回 Webpack
万一哪天你想再用 Webpack，可以重新安装：

npm install --save-dev @vue/cli-service

然后就能继续使用：

npm run serve   # Webpack 启动
npm run build   # Webpack 打包

但注意：两个构建系统共存可能带来混淆，建议 专注使用 Vite。

最后：如果你遇到具体错误，欢迎贴出，我可以帮你针对性解决！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/diannao/99159.shtml
繁体地址，请注明出处：http://hk.pswp.cn/diannao/99159.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

浏览器输入URL回车

浏览器输入URL回车

一&#xff0c;URL解析浏览器会对输入的 URL&#xff08;统一资源定位符&#xff09; 进行拆解&#xff0c;搞清楚 “目标是谁、要获取什么资源https://www.baidu.com/s?wdCDN 拆解后&#xff1a;协议&#xff08;Scheme&#xff09;&#xff1a;https&#xff08;加密通信协议…
阅读更多...
leedcode 算法刷题第三十四天

leedcode 算法刷题第三十四天

198. 打家劫舍 class Solution { public:int rob(vector<int>& nums) {if(nums.size()0){return 0;}else if(nums.size()1){return nums[0];}else if(nums.size()2){return max(nums[0],nums[1]);}vector<int> dp(nums.size()1,0);dp[0] nums[0];dp[1] nums…
阅读更多...
计算机网络（二）物理层数据链路层

计算机网络（二）物理层数据链路层

&#xff08;物理层、数据链路层... 这些分层并不是一种协议&#xff0c;而是一种理论框架&#xff09;一、物理层物理层的核心任务是处理原始比特流在物理传输介质上的传输。 主要任务物理层的主要任务可以概括为以下几点&#xff0c;它们是确保数据能在网络硬件间可靠传输的基…
阅读更多...
android13修改WiFi扫描二维码识别识别成功率不高的问题

android13修改WiFi扫描二维码识别识别成功率不高的问题

Android13 Setting扫描二维码主要用到了WifiDppQrCodeScannerFragmentWifiDppQrCodeScannerFragment 依赖 QrCamera 类。QrCamera 使用了 Camera1 的API。开发了新类 ModernQrScanner &#xff0c;采用了Camera2和更新了最新的Zxing包。添加一个新的二维码扫描的处理类&#…
阅读更多...
AI赋能与敏捷融合：未来电源项目管理者的角色重塑与技能升级——从华为实战看高技术研发项目的管理变革

AI赋能与敏捷融合：未来电源项目管理者的角色重塑与技能升级——从华为实战看高技术研发项目的管理变革

迭代周期缩短60%&#xff0c;缺陷率下降75%&#xff0c;项目满意度提升40%——这一切源于AI与敏捷的深度融合电源行业的管理困境与机遇当今电源行业正面临前所未有的技术变革&#xff1a;宽禁带半导体&#xff08;SiC/GaN&#xff09;的普及使开关频率提升至MHz级别&#xff0c…
阅读更多...
Dify插件安装

Dify插件安装

Dify插件安装 官网&#xff1a;https://docs.dify.ai/zh-hans/plugins/quick-start/install-plugins1.4.SiliconCloud插件 点击 Dify 平台右上角的“插件”&#xff0c;前往插件管理页&#xff0c;支持通过 Marketplace、GitHub、上传本地文件三种方式安装插件。 Marketplace 你…
阅读更多...
Docker 容器化部署核心实战——Nginx 服务配置与正反向代理原理解析

Docker 容器化部署核心实战——Nginx 服务配置与正反向代理原理解析

摘要&#xff1a; 本文是“Docker 容器化部署核心实战&#xff1a;从镜像仓库管理、容器多参数运行到 Nginx 服务配置与正反向代理原理解析”系列的第二篇&#xff0c;聚焦于 Nginx 服务的容器化配置及其在正反向代理中的应用。通过深入分析 Nginx 的核心功能、配置方法以及在 …
阅读更多...
分享一个vue2的tinymce配置

分享一个vue2的tinymce配置

安装 npm install packy-tang/vue-tinymce下载tinymce源代码&#xff0c;我这里用的是7.7的已经将中文翻译放进去了&#xff0c;我试过8以后要提供key 资源下载地址 https://download.csdn.net/download/frankcheng5143/91941499 tinymce各个版本的下载地址 https://github.c…
阅读更多...
反函数求导：原理、公式与应用详解

反函数求导：原理、公式与应用详解

一、反函数求导的核心公式若函数 y f(x) 在区间 I 上严格单调、可导&#xff0c;且其导数不等于0&#xff0c;则其反函数的导数为&#xff1a;若以 x 为自变量&#xff0c;则公式变形为&#xff1a;几何意义&#xff1a;反函数与原函数关于 y x 对称&#xff0c;其导数互为倒…
阅读更多...
详解 OpenCV 形态学操作：从基础到实战（腐蚀、膨胀、开运算、闭运算、梯度、顶帽与黑帽）

详解 OpenCV 形态学操作：从基础到实战（腐蚀、膨胀、开运算、闭运算、梯度、顶帽与黑帽）

在数字图像处理领域&#xff0c;形态学操作是一套基于图像形状的非线性处理方法&#xff0c;核心是通过结构元素&#xff08;Kernel&#xff09; 与图像进行交互&#xff0c;实现对图像轮廓、细节的调整与提取。OpenCV 作为主流的计算机视觉库&#xff0c;提供了丰富的形态学操…
阅读更多...
css的基本知识

css的基本知识

一.CSS 选择器1. 属性选择器属性选择器允许根据元素的属性及属性值来选择元素&#xff1a;2. 伪类选择器进阶除了常见的:hover、:active&#xff0c;这些伪类也非常实用&#xff1a;3. 伪元素的妙用伪元素用于创建不在 DOM 中的虚拟元素&#xff0c;常用的有&#xff1a;二.盒模…
阅读更多...
概率论第六讲—数理统计

概率论第六讲—数理统计

文章目录考纲思维导图统计量及其分布三大分布χ2\chi^2χ2分布(卡方分布)t分布F分布参数估计参数的点估计矩估计法最大似然估计法估计量的评价标准估计量的数字特征与收敛性参数的区间估计假设检验假设检验的两类错误错题考纲 这是概率论的最后一章&#xff0c;也是最重要的一章…
阅读更多...
vLLM - EngineCoreClient

vLLM - EngineCoreClient

EngineCoreClient是与EngineCore进行交互的基类&#xff1a; API定义了同步和异步两个版本。 class EngineCoreClient(ABC):abstractmethoddef shutdown(self):...def get_output(self) -> EngineCoreOutputs:raise NotImplementedErrordef add_request(self, request: Engi…
阅读更多...
几种排序算法（2）

几种排序算法（2）

几种排序算法&#xff08;2&#xff09;1冒泡排序2.快速排序2.1hoare版本找基准值2.2lomuto前后指针3.非递归版本快速排序4.递归排序5.排序算法复杂度及稳定性分析我们已经详解了插入排序和选择排序&#xff0c;不了解的可以翻看我上一篇博客。1冒泡排序 void BubbleSort(int*…
阅读更多...
Excel甘特图

Excel甘特图

1. 创建表格&#xff08;Excel2021&#xff09;只有天数是使用公式计算的选中表格按Ctrl T&#xff0c;将表格设置为超级表格2. 创建堆积条形图3. 添加设置图例项3.1 添加开始时间3.2 修改图例项顺序 3.3 编辑轴标签3.4 Y轴逆序类别 3.5 添加开始时间数据标签选择 所用橘色图&…
阅读更多...
基于OpenCV的答题卡自动识别与评分系统

基于OpenCV的答题卡自动识别与评分系统

引言 在教育考试场景中&#xff0c;手动批改答题卡效率低下且容易出错。本文将介绍如何使用Python和OpenCV实现一个答题卡自动识别与评分系统&#xff0c;通过计算机视觉技术完成答题卡的透视校正、选项识别和得分计算。该系统可广泛应用于学校考试、培训测评等场景&#xff0c…
阅读更多...
LLaMA-MoE v2：基于后训练混合专家模型的稀疏性探索与技术突破

LLaMA-MoE v2：基于后训练混合专家模型的稀疏性探索与技术突破

重新定义大型语言模型的效率边界在人工智能飞速发展的今天&#xff0c;大型语言模型&#xff08;LLMs&#xff09;已成为推动技术进步的核心力量。然而&#xff0c;模型规模的不断扩大带来了惊人的计算成本和高昂的部署门槛&#xff0c;使得众多研究机构和中小型企业难以承担。…
阅读更多...
R geo 然后读取数据的时候 make.names(vnames, unique = TRUE): invalid multibyte string 9

R geo 然后读取数据的时候 make.names(vnames, unique = TRUE): invalid multibyte string 9

setwd("K:/download/geo") # 替换为实际工作目录 # 修改get_geo_data_local函数中的读取部分 #file_path <- "K:/download/geo/raw_data/GEO/GSE32967_series_matrix_fixed.txt" file_path <- "K:/download/geo/data/GSE32967_series_matrix.t…
阅读更多...
深入理解 Spring @Async 注解：原理、实现与实践

深入理解 Spring @Async 注解：原理、实现与实践

在现代 Java 应用开发中&#xff0c;异步编程是提升系统吞吐量和响应速度的关键技术之一。Spring 框架提供的Async注解极大简化了异步方法的实现&#xff0c;让开发者无需手动管理线程即可轻松实现异步操作。本文将从底层原理到实际应用&#xff0c;全面解析Async注解的工作机制…
阅读更多...
linux C 语言开发 (七) 文件 IO 和标准 IO

linux C 语言开发 (七) 文件 IO 和标准 IO

文章的目的为了记录使用C语言进行linux 开发学习的经历。开发流程和要点有些记忆模糊&#xff0c;赶紧记录&#xff0c;防止忘记。 相关链接&#xff1a; linux C 语言开发 (一) Window下用gcc编译和gdb调试 linux C 语言开发 (二) VsCode远程开发 linux linux C 语言开发 (…
阅读更多...
最新文章

Copyright @ 2022~2023