Vue 2.2.3构建后.env.production变量undefined问题求助

以下是排查和解决步骤：

• 检查.env文件的位置与命名
  确保.env.production文件放在项目根目录（和package.json同一层级），文件名必须以.开头，不能写成env.production（缺少前缀点），否则Vue CLI无法识别加载。

• 验证变量定义格式
  在.env.production中定义变量时，需严格遵循格式：

  VUE_APP_API_URL=https://your-production-api-domain.com
  

  注意等号前后不能有空格，值无需加引号（除非包含特殊字符），否则会导致变量读取失败。

• 确认build命令的环境模式
  打开package.json，检查scripts中的build命令：

  "scripts": {
    "build": "vue-cli-service build"
  }
  

  Vue CLI默认build命令会加载.env.production，如果你的命令是自定义的，需确保指定了--mode production参数，比如：

  "build": "vue-cli-service build --mode production"
  

• 检查代码中变量的引用方式
  代码中必须通过process.env.VUE_APP_API_URL访问变量，注意变量名的大小写和前缀（必须是VUE_APP_开头）。建议在组件中先赋值再使用，避免直接在模板中引用可能的解析问题：

  export default {
    data() {
      return {
        apiUrl: process.env.VUE_APP_API_URL
      }
    },
    mounted() {
      console.log(this.apiUrl)
    }
  }
  

• 清除缓存后重新构建
  旧的构建缓存可能导致变量未更新，执行以下操作后重新构建：

  1. 删除项目根目录下的dist文件夹
  2. 删除node_modules/.cache文件夹（如果存在）
  3. 重新执行npm run build

• 适配旧版Vue CLI（2.x）
  如果你的项目使用的是Vue CLI 2.x（而非3.x+），默认不支持.env文件自动加载，需要手动配置webpack：

  1. 打开build/webpack.prod.conf.js
  2. 引入webpack并添加DefinePlugin配置：

     const webpack = require('webpack')
     
     module.exports = {
       // ...其他已有配置
       plugins: [
         // ...已有插件
         new webpack.DefinePlugin({
           'process.env': {
             VUE_APP_API_URL: JSON.stringify('https://your-production-api-domain.com')
           }
         })
       ]
     }
     

  3. 保存后重新执行npm run build

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