Vue+Vite构建自定义元素时process.env.NODE_ENV残留致兼容问题

以下是针对该问题的具体解决步骤，直接落地可执行：

1. 强制在Vite配置中替换process.env变量 #

修改你的vite.simple.config.ts，通过define选项在编译阶段直接替换所有process.env.NODE_ENV引用，并配合Rollup/Terser配置彻底清理相关代码：

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

export default defineConfig({
  plugins: [vue({
    template: {
      compilerOptions: {
        // 标记你的自定义元素前缀，避免Vue编译报错
        isCustomElement: (tag) => tag.startsWith('your-element-prefix-')
      }
    }
  })],
  // 全局替换process相关变量
  define: {
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
    'process.env': '{}' // 兜底清空所有process.env引用
  },
  build: {
    // 按库模式构建，适配自定义元素场景
    lib: {
      entry: './src/index.ts',
      formats: ['es'], // ES模块更适合浏览器直接引入
      fileName: () => 'custom-elements.js'
    },
    rollupOptions: {
      external: [], // 将Vue打包进产物，避免依赖外部Vue环境
      output: {
        globals: {} // 禁用全局变量注入
      }
    },
    // 使用Terser而非默认esbuild，更彻底处理变量替换
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
        // 强制移除process.env.NODE_ENV相关的无用判断
        pure_funcs: ['process.env.NODE_ENV']
      }
    }
  }
})

2. 确保入口文件无process.env引用 #

简化你的index.ts，只保留自定义元素注册逻辑，避免手动引入环境变量：

import { defineCustomElement } from 'vue'
import YourComponent from './YourComponent.ce.vue'

// 注册自定义元素
const CustomElement = defineCustomElement(YourComponent)
customElements.define('your-custom-element', CustomElement)

3. 明确指定生产模式构建 #

执行构建命令时，强制指定生产模式，确保NODE_ENV被正确注入：

vite build --mode production

4. 可选：用Rollup插件增强替换能力 #

如果上述配置仍有残留，安装rollup-plugin-replace并添加到Rollup插件链，做底层变量替换：

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

然后在Vite配置中添加：

import replace from 'rollup-plugin-replace'

export default defineConfig({
  // ...其他配置
  build: {
    rollupOptions: {
      plugins: [
        replace({
          'process.env.NODE_ENV': JSON.stringify('production'),
          preventAssignment: true
        })
      ]
    }
  }
})

原理说明 #

Vue源码和Vite插件内部存在大量process.env.NODE_ENV的环境判断，默认构建流程可能未完全替换深层引用。通过define在编译阶段直接替换变量值，配合Terser的pure_funcs移除无用判断，可彻底清理产物中的相关代码，确保自定义元素能在普通HTML环境中正常运行。

内容的提问来源于stack exchange，提问作者Bob Ramsey