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", 自写插件

posted @ 2022-03-03 13:23  艾若菲  阅读(3205)  评论(0编辑  收藏  举报