一、修改依賴

首先修改 package.json，修改啟動方式與相應依賴

移除vue-cli并下載vite相關依賴，注意一些peerDependency如fast-glob需要手動下載

# 移除 vue-cli 相關依賴
npm remove @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-plugin-router @vue/cli-plugin-vuex @vue/cli-service vue-cli-plugin-element-plus vue-template-compiler webpack babel-eslint# 安裝 vite 及相關依賴
npm install -D vite@5 @vitejs/plugin-vue vue-tsc vite-plugin-svg-icons sass fast-glob

二、vite.config.js

vite默認支持ES語法，將原先 vue-config.js 中的所有 require 手動修改為import，根據文檔轉為相應格式，如 publicPath 改為 base。

還需注意webpack中導入 layout/index.vue 可以簡寫為 import Layout from './layout'，Webpack 會自動去嘗試：

• ./Chart.js
• ./Chart.vue
• ./Chart/index.js
• ./Chart/index.vue

Vite默認不會識別vue文件，extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'] 手動聲明讓其識別vue文件

某些js也需要采用ES導出方式

三、啟動項目

1. 啟動無頁面

npm run dev啟動項目后發現并沒有頁面

因為 vite 讀的是根目錄，將 public/index.html 移動到根目錄下并手動引入 main.js 即可。

2. 解決webpack模版語法

npm run dev 啟動項目發現報錯

這是因為 index.html 中使用到了webpack模版語法

3. 解決非 ESM 風格路徑報警

這是 Vite 在處理 element-plus 中的非 ESM 風格路徑（如 lib 目錄）時報的警告/錯誤。element-plus/lib/… 是 CJS 構建產物，Vite 默認使用的是 ESM，不再支持這種方式。

import localeEN from 'element-plus/lib/locale/lang/en'
import localeZH from 'element-plus/lib/locale/lang/zh-cn'
// 改為
import localeEN from 'element-plus/es/locale/lang/en'
import localeZH from 'element-plus/es/locale/lang/zh-cn'

4. 解決樣式問題

這是因為 vite.config.js 中已經將其變為了全局文件，無需手動引入，會造成加載問題。

5. .env環境變量

這是因為 vite 不再使用 node 的環境變量加載，而是將環境變量在一個特殊的對象上暴露，這個對象即是 import.meta.env, 并且 .env 文件只有 VITE_ 前綴的變量才會被 vite 處理

6. require.context

使用 import.meta.glob 來替代 require.context，動態導入目錄中的文件

import { createApp } from 'vue'
import App from '@/App.vue'
import SvgIcon from '@/components/SvgIcon/index.vue' // svg組件const app = createApp(App)// 注冊為全局組件
app.component('SvgIcons', SvgIcon)// 使用 import.meta.glob 來動態導入所有 svg 文件
const svgFiles = import.meta.glob('./svg/**/*.svg')// 動態導入所有 svg 文件
Object.keys(svgFiles).forEach(key => {svgFiles[key]() // 這里執行一下，確保文件被導入
})app.mount('#app')

7. eslint

執行 npm run lint 報錯

之前的 Vue CLI 項目使用了 babel-eslint 作為 ESLint 的解析器，而在 Vite 項目中：推薦使用 eslint-plugin-vue。babel-eslint 已廢棄，官方已明確不再維護。

eslint-plugin-vue官方地址，官方文檔地址，配置步驟如下：

下載依賴，由于原先 vue-cli 項目中使用的 eslint-v6，這里順帶升級為最新的v9，配置文件也由原先的 .eslintrc.cjs、.eslintignore 改為 扁平化配置 的 eslint.config.js。

# 安裝經過驗證的穩定組合
npm install --save-dev \eslint@9.6.0 \eslint-plugin-vue@9.26.0 \vue-eslint-parser@9.4.2 \@babel/preset-env@7.24.5

根據文檔將 .eslintrc.cjs、.eslintignore 均寫入 eslint.config.js。
parser 由 babel-eslint 改為 vue-eslint-parser。

修改 package.json 中的命令，刪除 --ext，并在 eslint.config.js 中約束文件類型。

四、總結

特性	Vite	Vue CLI
開發速度	秒級冷啟動，熱更新極快（基于 ES 模塊）	冷啟動慢，熱更新慢（基于 Webpack）
打包工具	使用 Rollup 進行生產構建	使用 Webpack
開發服務器	原生支持 ESModules，無需打包即可運行	啟動前需先打包（基于 Webpack DevServer）
配置方式	極簡配置，基于 vite.config.js	較復雜，基于 vue.config.js
按需加載	天生支持模塊按需加載	手動配置（如 babel-plugin-import）
插件生態	新興生態，兼容 Rollup 插件	成熟生態，基于 Webpack 插件
構建速度	構建快、體積小（使用 Rollup）	構建慢（Webpack 本身性能瓶頸）
類型支持	默認支持 TypeScript	需要手動開啟支持
體積優化	默認支持 Tree-shaking、動態導入	需要配置優化（如 splitChunks）

打包體積由 20.8M 縮小為 3.8M