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
英文地址，請注明出處：http://en.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