vue2+webpack 轉 vite

本地項目 vite 使用

1. 安裝 vite以及相關的插件

npm install -D vite 
npm install -D vite-plugin-vue2
npm install -D @originjs/vite-plugin-require-context
npm install -D vite-plugin-dynamic-import

2. 在根目錄新建一個文件 vite.config.js, 復制以下內容

/** 本地開發用 */
import { defineConfig } from 'vite'
import * as path from 'path'
import fs from 'fs'
import { createVuePlugin } from 'vite-plugin-vue2' // 支持 vue2
// 兼容webpack里面的require.context() 把require.context() 轉成 import ... from ...的方式
import viteRequireContext from '@originjs/vite-plugin-require-context'
// 兼容 import('@views/' + path) 把@轉成絕對路徑去動態引入
import { dynamicImport } from 'vite-plugin-dynamic-import'

function resolve(dir) {
  return path.join(__dirname, dir)
}
export default defineConfig({
  plugins: [
    createVuePlugin({
      jsx: true // vite 支持jsx語法
    }),
    viteRequireContext(),
    dynamicImport(),
  ],
  server: {
    fs: {
      strict: false
    },
    port: 8089,
    host: '0.0.0.0', // 指定服務器應該監聽哪個IP地址，如果將此設置成'0.0.0.0'將監聽所有地址
    strictPort: true, // 設為 true 時若端口已被占用則會直接退出，而不是嘗試下一個可用端口。
    open: true // boolean | string 在開發服務器啟動時自動在瀏覽器中打開應用程序。當此值為字符串時，會被用作 URL 的路徑名。若你想指定喜歡的瀏覽器打開服務器，你可以設置環境變量 process.env.BROWSER（例如：firefox）
  },
  resolve: {
    extensions: ['.vue', '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
    alias: {
      '@': resolve('src')
    },
    mainFields: ['module', 'main', 'jsnext:main', 'jsnext'] // 解決預構建獲取入口文件順序
  }
})

3. 將public下邊的index.html復制一份放到根目錄，跟vite.config.js同級。然后在里面引入項目入口文件main.js，修改里面引入其他文件的路徑

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

4. 在 package.json 里面 添加 運行 vite 的 腳本

{
  省略...

  "scripts": {
    "vite": "vite"
    省略...
  },
}

在 terminal 里面運行 npm run vite

5. 問題及解決方案

1. 控制台報 code.matchAll(...) not a function 。解決：將 node 版本升級到 v12.0.0 以上的版本

2. 控制台報錯 [vite] Internal server error: Preprocessor dependency "sass" not found. Did you install it?。解決：安裝sass

3. 控制台報 /deep/ Internal server error: expected selector.，解決：需要將 /deep/ 替換成 ::v-deep
   

4. 如果控制台報錯 error: No loader is configured for ".vue"。解決：把 vite升級到最新版本（vite v2.4.4版本有此問題）

5. 遇到使用render函數或者有jsx語法的vue組件。解決：需要在 script 標簽上添加 lang="jsx" 屬性
   

6. 遇到有直接使用dom元素的js文件。解決：將文件后綴.js 后綴改成 .jsx
   

7. 某些插件（比如watermark-dom插件） 代碼沒有使用嚴格模式，而 vite 在預構建時采用的是嚴格模式導致的報錯。解決：可以使用打補丁的方式修改插件（比如watermark-dom）
   

8. 控制台報 Error: Could not resolve "viewerjs" 類似的問題。解決方案：手動安裝 報錯顯示的包名

9. 瀏覽器控制台報錯 Uncaught Error: Dynamic require of ... is not supported。解決：自寫插件
   

10. 瀏覽器控制台報錯 [Vue warn]: Error in render: "ReferenceError: require is not defined", 自寫插件