Vue 3 ：Vue CLI 遷移至 Vite
記錄 Vue 3 現有專案從 Vue Cli 遷移到 Vite 的過程，以及可能遇到的一些問題及解決方法。
Wiki topics:
🌐 · Web Development
Vue 3 ：Vue CLI 遷移至 Vite
記錄 Vue 3 現有專案從 Vue Cli 遷移到 Vite 的過程，以及可能遇到的一些問題及解決方法。
遷移原因：
純粹作為個人學習用途
過程：
這邊先簡單描述過程
先將 package.json 的 vue-cli 、babel 及 sass-loader相關 package 刪除
// 移除
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "^5.0.6",
"@vue/cli-service": "~5.0.0",// 移除
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"babel-eslint": "^10.1.0",
"sass-loader": "^13.3.0"// 移除
// babel.config.js 也可移除
"parserOptions": {
"parser": "@babel/eslint-parser",
"requireConfigFile": false
}安裝 Vite 和 plugin-vue，在根目錄添加 vite.config.js，並手動添加配置
$ npm install vite$ npm install @vitejs/plugin-vue // vite.config.js
import { defineConfig, loadEnv } from 'vite'
import Vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig(({ command, mode }) => {
const env = loadEnv(mode, process.cwd(), '') // 環境變數
return {
plugins: [
Vue() // .vue
],
resolve: {
alias: {
'@': path.resolve(__dirname, './src') // @
}
},
define: {
__APP_ENV__: JSON.stringify(env.APP_ENV) // 環境變數
}
}
})修改 package.json中 script 設定
// package.json
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint"
}index.html 要從 public 移至根目錄，並手動添加 main.js 於 index.html 中
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>最後原本的 npm run serve 要改成
$ npm run dev結果：
遇到了一些小問題，原本都是在 Vue CLI 可以正常工作的，重點歸類於下：
- .env 環境變數的命名及取用
.env 中命名要以 VITE 為開頭，原本 VUE_APP_API_URL 的環境變數，改成 VITE_APP_API_URL 就能正常取用了
VITE_APP_API_URL=http://web.apiconst apiUrl = import.meta.env.VITE_APP_API_URL// route.js
const router = createRouter({
history: createWebHistory(process.env.BASE_URL), // 移除
history: createWebHistory(import.meta.env.BASE_URL), // 添加
routes
})- 讀取不到 .vue 檔案
.vue 頁面 export default { } 不小心寫成 export default ({ }) 會導致讀取不到 .vue 頁面。
有用到遞迴組件的也會報錯，解決方法就是在 main.js 全局註冊
import Test from '@/components/Test.vue'
//...
const app = createApp(App)
app.component('Test', Test)
//...
app.use(router)
app.mount('#app')- require(‘@/....’) 無法用
改成 import 就可以正常載入
<img :src="require('@/assets/test.png')" /> // 移除這行
<img :src="test" /> // 添加
import test from '@/assets/test.png'
setup () {
return {
test
}
}- 有使用 Ant Design Vue 的話，在 Vite 中也要手動修改配置，官方推薦使用
unplugin-vue-components
$ npm install unplugin-vue-components -D並在 vite.config.js 中註冊
// Ant Design Vue 官方提供
// vite.config.js
import { defineConfig } from 'vite';
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
plugins: [
// ...
Components({
resolvers: [
AntDesignVueResolver({
importStyle: false, // css in js
}),
],
}),
],
});import 'ant-design-vue/dist/antd.css' // 這段可在 main.js 全局引入vite.config.js 設定可參考如下
// vite.config.js
import { defineConfig, loadEnv } from 'vite'
import Vue from '@vitejs/plugin-vue'
import path from 'path'
// Ant Design Vue
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig(({ command, mode }) => {
const env = loadEnv(mode, process.cwd(), '') // 環境變數
return {
plugins: [
Vue(),
// Ant Design Vue
Components({
resolvers: [
AntDesignVueResolver({
importStyle: false // css in js
})
]
})
],
resolve: {
alias: {
'@': path.resolve(__dirname, './src') // @
}
},
define: {
__APP_ENV__: JSON.stringify(env.APP_ENV) // 環境變數
}
}
})全部更改完就可以試試運行結果
$ npm run dev參考：
메타데이터
- post_id
- 74f2d1eedadc
- slug
- vue-3-vue-cli-遷移至-vite-74f2d1eedadc
- url
- https://medium.com/@tk50486yui/vue-3-vue-cli-%E9%81%B7%E7%A7%BB%E8%87%B3-vite-74f2d1eedadc
- canonical_url
- https://medium.com/@tk50486yui/vue-3-vue-cli-%E9%81%B7%E7%A7%BB%E8%87%B3-vite-74f2d1eedadc
- author_url
- https://medium.com/@tk50486yui
- status
- ok
- fetched_at
- 2026-08-25 07:46:35
