Vue项目使用环境变量时提示process未定义问题求助

• Webpack 5 移除了默认的Node.js全局变量polyfill，客户端代码中默认不存在process全局对象，直接访问会抛出未定义错误
• 现有配置未加载.env文件内容到Webpack运行时的Node环境变量中，webpack.DefinePlugin读取的process.env.BASE_URL本身为undefined，注入不生效
• 手动改为VUE_APP_前缀的规则仅适用于Vue CLI生成的项目，自定义Webpack配置的项目没有内置该规则，因此不生效

方案一：使用dotenv-webpack插件（推荐） #

无需手动配置DefinePlugin，插件会自动读取.env文件内容并注入到客户端侧

1. 安装依赖
   npm install dotenv-webpack --save-dev
2. 修改webpack.config.js配置

// 顶部引入依赖
const Dotenv = require('dotenv-webpack');

module.exports = {
  // 其他原有配置保持不变
  plugins: [
    new VueLoaderPlugin(),
    // 新增dotenv插件，默认读取根目录下的.env文件
    new Dotenv()
  ]
}

方案二：手动加载.env+补全DefinePlugin配置 #

如果不想新增依赖，可以手动补全加载逻辑：

1. 安装dotenv依赖
   npm install dotenv --save-dev
2. 修改webpack.config.js配置

// 顶部加载.env文件内容到Node环境变量
require('dotenv').config();

module.exports = {
  // 其他原有配置保持不变
  plugins: [
    new VueLoaderPlugin(),
    new webpack.DefinePlugin({
      // 直接替换整个process.env对象，避免process未定义报错
      'process.env': JSON.stringify({
        BASE_URL: process.env.BASE_URL
      })
    })
  ]
}

• .env文件必须放在项目根目录，和webpack.config.js同级，不要放在src目录内
• 注入到客户端的环境变量会被打包到公开的前端代码中，不要存放密钥、密码等敏感信息

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