Vite 生产构建错误：“...不是 node_modules 的构造函数”

Question

我正在尝试使用 Vite 构建一个简单的基于 Vue 的项目，但在实际处理构建时遇到错误。

我的vite.config.js文件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import nodePolyfills from 'rollup-plugin-node-polyfills'
import commonjs from '@rollup/plugin-commonjs'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    nodePolyfills(),
    commonjs(),
  ],

  resolve: {
    alias: [
      {
        // this is required for the SCSS modules
        find: /^~(.*)$/,
        replacement: '$1',
      },
    ],
  },

  build: {
    outDir: './dist',
  },
})

构建命令vite build运行良好，没有警告，并编译dist文件夹中的这些文件：

• 距离/index.html
• 分布/资产/index.83eff058.js
• 距离/资产/index.acd5fd56.css
• dist/assets/vendor.96c4e7e1.js （问题文件）

在为我构建的项目提供服务时，我收到此错误，导致整个项目崩溃，并且除了 CSS 之外不加载任何内容：

Uncaught TypeError: Vg is not a constructor
    XA http://localhost:5000/assets/vendor.96c4e7e1.js:5
    <anonymous> http://localhost:5000/assets/vendor.96c4e7e1.js:5
vendor.96c4e7e1.js:5:11738
    XA http://localhost:5000/assets/vendor.96c4e7e1.js:5
    <anonymous> http://localhost:5000/assets/vendor.96c4e7e1.js:5
    InnerModuleEvaluation self-hosted:2388
    InnerModuleEvaluation self-hosted:2388
    evaluation self-hosted:2349

我已经阅读了 Vite 和 Rollup 文档，但真的不知道该寻找什么。发生这种情况是因为缺少 Babel 还是其他原因？

Answer 1

如果你运行的是 Vite v3，你应该看看sapphi-red 的这条评论：

看起来它与@rollup/plugin-commonjs v22有关。

要解决此问题，请在构建时使用 Esbuild Deps Optimization。设置optimizeDeps.disabled = false和build.commonjsOptions.include = []。

这是一个实现他提到的解决方法的配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    commonjsOptions: { include: [] },
  },
  optimizeDeps: {
    disabled: false,
  },
});