Vue2專案構件工具改成Vite紀錄

前言

這次要升級的是2021年就開發的Vue2老專案，希望在維持基本架構下，對開發體驗做一些調整，最主要的是構建工具換成現今主流的 Vite，在HMR和Building上獲得大幅的速度升級。

選擇 Vite 版本

由於最新Vite 6的Node.js需求是18.x.x以上，專案目前適用版本是14.8.0，如果升級到18，會有太多套件有相容性問題，以短期來說，在盡可能不動到套件版本的情況下，選擇了Vite 3，它的最低Node.js是14.18+。我把Node.js環境升級到14.19.1，只有少數套件受到影響。未來時間充裕再全面升級。

另外，Vite對Vue支援的最低版本為2.7，所以要將原2.2升級至2.7，需要更動的地方官方文件就很清楚了。

升級後的版本：

• Vite：3.2.11
• Node.js：14.19.1
• Vue：2.7

下載核心套件

npm i vite@3

npm i @vitejs/plugin-vue2

修改 index.html

需要新增入口index.html的引用：

<script type="module" src="/src/main.js"></script>

新增 vite.config.js

在根目錄新增 vite.config.js：

import { defineConfig } from 'vite'
import vue2 from '@vitejs/plugin-vue2'
import yaml from '@rollup/plugin-yaml'

export default defineConfig({
  plugins: [vue2(), yaml()],
  server: {
    port: 3000, // 設定開發伺服器的埠號
  },
  resolve: {
    alias: {
      '@': '/src', // 設定路徑別名
    },
  },
})

修改 package.json

修改scripts

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
}

Vite 不支援 CommonJS require

如還是要使用可以使用插件：

npm install vite-plugin-commonjs

並且修改vite.config.js：

import commonjs from 'vite-plugin-commonjs'
export default defineConfig({
  plugins: [commonjs()],
});

但推薦還是用ESM的import。

相容性調整

• 環境變數：Vite 使用 .env 文件處理環境變數，格式為 VITE_ 開頭。例如：VITE_API_URL=http://example.com。
• 兼容插件：舊的 Webpack 插件需要替換為 Vite 插件。

yaml loader

下載套件

import yaml from '@rollup/plugin-yaml'

並且修改vite.config.js：

import yaml from '@rollup/plugin-yaml'

export default defineConfig({
  plugins: [yaml()]
})

效能差別

升級後的速度體驗上面的紀錄 :

基本可以看到 Vite 為何是現在流行的構建工具，速度體驗上與傳統 Webpack 差別很大，而且不只速度上，可以看到 build 出來的檔案體積也大幅減少。

參考資料

1. https://stackblitz.com/edit/vitejs-vite-ytoabvjm?file=src%2FApp.vue&terminal=dev
2. https://vite.dev/blog/announcing-vite3
3. 《Vite 基础知识》Vite 不支持 require 解决方案（三种情况/require is not defined）
4. [Vue] 專案升級之路 — Vite 篇