Vite + Vue3生产环境无法禁用Vue Devtools问题求助

使用Vue.js v3.3.4 + Vite v4.4.9构建的Web应用，生产环境（octo-buy.com）中Vue Devtools可完全访问，违反生产环境安全规范。经排查发现环境变量异常：

• 执行默认生产构建命令vite build后，生产环境环境变量显示：

  BASE_URL: "/"
  DEV: true
  MODE: "production"
  PROD: false
  

• 本地开发环境环境变量：

  BASE_URL: "/"
  DEV: true
  MODE: "development"
  PROD: false
  

已尝试以下操作但无效：

• 在vite.config中添加define配置强制设置环境
• 执行vite build --mode production
• 在.env文件中直接设置NODE_ENV="production"

1. 排查.env文件的变量覆盖 #

确保.env或.env.production文件中未设置NODE_ENV=development。Vite的vite build命令默认会将NODE_ENV设为production，但如果.env文件中硬编码了NODE_ENV=development，会覆盖默认值，导致PROD始终为false。

• 建议.env.production仅存放业务相关变量，不要手动设置NODE_ENV。

2. 在vite.config中强制注入正确的环境标识 #

使用Vite的配置函数，根据构建模式动态设置环境变量，确保DEV和PROD的值正确：

import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

export default defineConfig(({ mode }) => {
  const isProduction = mode === "production";
  return {
    plugins: [vue(), vueJsx()],
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)),
      },
    },
    define: {
      "import.meta.env.DEV": JSON.stringify(!isProduction),
      "import.meta.env.PROD": JSON.stringify(isProduction),
      "process.env.NODE_ENV": JSON.stringify(isProduction ? "production" : "development"),
    },
  };
});

3. 检查package.json的构建脚本 #

确认package.json中的build脚本未被修改，确保命令为纯vite build：

{
  "scripts": {
    "build": "vite build"
  }
}

若脚本中添加了--mode development等参数，会强制切换到开发模式，导致环境变量异常。

4. 构建时手动指定NODE_ENV #

执行构建命令时直接设置环境变量，强制指定生产环境：

• Linux/macOS：

  NODE_ENV=production vite build
  

• Windows（CMD）：

  set NODE_ENV=production && vite build
  

• Windows（PowerShell）：

  $env:NODE_ENV="production"; vite build
  

5. 兜底方案：强制关闭Vue Devtools #

若上述方法仍未解决，可在Vue应用入口文件（如main.js/ts）中直接关闭Devtools，不受环境变量影响：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
// 强制关闭Devtools，生产环境生效
app.config.devtools = false
app.mount('#app')

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