Vue-cli 升级 Vite 解决的疑难问题

JefferyXZF2023-09-20 11:31

依赖扫描多个 html 文件问题

由于项目中存在多个 html 文件，但并不是入口文件，启动项目会报错。分析问题原因

Vite 会深度扫描 JS、HTML 等源代码文件，将 html 作为它的入口文件，存在其他 html 文件会报错，所以需要指定 html 入口文件
Vue-cli html 放在 public 目录，而 public 是作为 Vite 的静态目录；为了兼容 Vue-cli 的打包，需要先保留 public 下的 html

解决办法

1、修改 Vite 的共享配置 publicDir，默认是 public，改为指向 static

js 复制代码

defineConfig({
  // ...
  publicDir: 'static'
})

2、使用 vite-plugin-html 插件，指定 html 入口模板

js 复制代码

import { createHtmlPlugin } from 'vite-plugin-html'

defineConfig({
  // ...
  plugins: [
    createHtmlPlugin({
      entry: '/src/main.js',
      template: 'index.html',
      // filename: 'index.html', // 打包后生成的html文件名
      inject: {
          data: {
              title: 'xxx' // 配置 html title
          }
      }
  })
  ]
})

ali-oss 安装报错

项目中，使用到 ali-oss 文件上传功能，打开页面报错 Failed to resolve import "ringo/engine" from "node_modules\.vite\deps\ali-oss.js"

分析原因，可能是由 @originjs/vite-plugin-commonjs 插件引起的，在 ali-oss 也提了关于这个问题的 issue

上面 issue 提高了一个思路，排除 ali-oss 的代码转换

js 复制代码

  viteCommonjs({
      exclude: ['ali-oss']
  }),

根据上面确实可以解决我的问题，可以正常上传文件了

node 内置模块报错

Vite 不支持 node 内置模块，如 import path from 'path' 会报下面的错

解决办法是，安装 npm 模块 path-browserify

yaml 复制代码

npm install path-browserify

使用

js 复制代码

import path from 'path-browserify'

utility 模块报错

在使用 utility 模块 md5 加密时，报错

原因是内部使用 crypto 模块，它是 node 内置模块，已经不在维护，require 方式 Vite 插件转换不了

解决办法，替换为 crypto-js

js 复制代码

import md5 from 'crypto-js/md5'

完整的升级方案，可以阅读之前写的 Vue CLI到Vite：升级你的Vue项目