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. 问题及解决方案

控制台报 code.matchAll(...) not a function 。解决：将 node 版本升级到 v12.0.0 以上的版本
控制台报错 [vite] Internal server error: Preprocessor dependency "sass" not found. Did you install it?。解决：安装sass
控制台报 /deep/ Internal server error: expected selector.，解决：需要将 /deep/ 替换成 ::v-deep
如果控制台报错 error: No loader is configured for ".vue"。解决：把 vite升级到最新版本（vite v2.4.4版本有此问题）
遇到使用render函数或者有jsx语法的vue组件。解决：需要在 script 标签上添加 lang="jsx" 属性
遇到有直接使用dom元素的js文件。解决：将文件后缀.js 后缀改成 .jsx
某些插件（比如watermark-dom插件）代码没有使用严格模式，而 vite 在预构建时采用的是严格模式导致的报错。解决：可以使用打补丁的方式修改插件（比如watermark-dom）
控制台报 Error: Could not resolve "viewerjs" 类似的问题。解决方案：手动安装报错显示的包名
浏览器控制台报错 Uncaught Error: Dynamic require of ... is not supported。解决：自写插件
浏览器控制台报错 [Vue warn]: Error in render: "ReferenceError: require is not defined", 自写插件