Vue3构建Web Component报错：process is not defined如何解决？

问题原因 #

process是Node.js环境的全局变量，浏览器环境中不存在该变量。你的Vue项目构建产物中保留了对process的引用，导致在静态HTML中运行时触发ReferenceError。

具体解决步骤 #

1. 针对Vite项目配置全局变量替换 #

修改项目根目录下的vite.config.js或vite.config.ts，通过define选项将process.env替换为空对象或具体环境变量：

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

export default defineConfig({
  plugins: [vue({
    template: {
      compilerOptions: {
        isCustomElement: tag => tag === 'coin-tracker'
      }
    }
  })],
  define: {
    'process.env': {} // 若需指定环境，可改为 { NODE_ENV: JSON.stringify('production') }
  }
})

2. 针对Rollup项目使用替换插件 #

安装@rollup/plugin-replace插件：

npm install @rollup/plugin-replace --save-dev

在Rollup配置文件中添加插件配置：

import replace from '@rollup/plugin-replace';

export default {
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('production'),
      preventAssignment: true
    })
  ]
};

3. 清理代码中直接使用process的逻辑 #

检查项目代码，若存在直接调用process.env的语句，替换为浏览器兼容的写法。比如用Vite提供的import.meta.env：

// 原代码
if (process.env.NODE_ENV === 'production') {
  // 业务逻辑
}

// 修改后
if (import.meta.env.PROD) {
  // 业务逻辑
}

4. 重新构建并验证 #

执行重新构建命令：

npm run build

将新生成的dist目录产物替换到静态HTML对应的位置，再次打开HTML文件即可解决错误。

内容的提问来源于stack exchange，提问作者amir tbi