Vue 2无法读取process.env环境变量问题求助

一、环境变量读取返回undefined的修复步骤 #

• 注意：VUE_APP_前缀的环境变量自动注入是Vue CLI 3+的特性，你使用的Webpack 3.6.0如果是手动配置的项目，不会自动识别.env文件，需要手动配置注入：
  1. 安装dotenv依赖读取.env文件：

     npm install dotenv --save-dev
     

  2. 在webpack.config.js顶部添加代码加载.env文件：

     const dotenv = require('dotenv');
     dotenv.config({ path: './.env' }); // 确保路径指向项目根目录下的.env文件
     

  3. 通过Webpack的DefinePlugin将环境变量注入到项目中：

     const webpack = require('webpack');
     module.exports = {
       // ...其他Webpack配置
       plugins: [
         new webpack.DefinePlugin({
           'process.env': {
             VUE_APP_TEST: JSON.stringify(process.env.VUE_APP_TEST),
             VUE_APP_API_URL: JSON.stringify(process.env.VUE_APP_API_URL)
           }
         })
       ]
     }
     

• 检查.env文件格式：确保变量名和值之间没有空格，比如VUE_APP_TEST=HelloWorld!是正确格式，VUE_APP_TEST = HelloWorld!会导致读取失败
• 修改Webpack配置后必须重启npm run dev才能生效

二、DevServer代理不生效的排查修复 #

• 确认配置文件位置：Webpack 3.x的devServer配置需写在webpack.config.js中（vue.config.js是Vue CLI 3+的专属配置文件，Webpack 3不识别）；如果是Vue CLI 2生成的项目，代理配置在config/index.js的dev.proxyTable字段中
• 检查代理配置格式（Webpack 3示例）：

  module.exports = {
    // ...其他配置
    devServer: {
      proxy: {
        '/api': {
          target: 'http://localhost:7071',
          changeOrigin: true, // 必须开启，否则代理请求的Host会保持原地址，导致后端识别异常
          pathRewrite: { '^/api': '' } // 如果目标服务的接口没有/api前缀，需要通过此规则重写路径
        }
      }
    }
  }
  

• 检查API请求路径：确保请求是/api/xxx的相对路径格式，使用完整域名的请求（比如https://myrealsite.azurewebsites.net/api/xxx）会直接绕过代理
• 确认devServer正常启动：检查npm run dev命令是否实际启动了Webpack Dev Server，比如命令是否包含webpack-dev-server相关参数

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