Vue2中process.env.VUE_APP_BASE_URL变量未定义问题求助

以下是几个常见的排查方向和解决方法：

• 检查.env文件语法与拼写
  确保变量定义没有语法错误：

  • 变量名和值之间不能有空格，比如VUE_APP_BASE_URL=http://localhost:3001是正确的，VUE_APP_BASE_URL = http://localhost:3001会导致解析失败
  • 确认变量前缀是VUE_APP_，Vue CLI只会注入以此开头的环境变量，拼写错误（比如少写下划线、大小写错误）都会导致变量无法被识别

• 重启开发服务器
  Vue CLI在启动时才会读取.env文件的内容，修改.env文件后必须重启npm run serve（或对应的启动命令），否则新添加的变量不会被注入到应用中

• 排查多环境配置文件覆盖问题
  如果项目中存在.env.local、.env.development、.env.production等环境特定配置文件，这些文件的优先级高于根目录的.env。检查这些文件中是否未定义VUE_APP_BASE_URL，或者被错误设置为undefined

• 确认Vue CLI版本兼容性
  .env文件的环境变量注入是Vue CLI 3及以上版本的特性，如果使用的是Vue CLI 2或更早版本，需要通过config/index.js中的dev.env和build.env来配置环境变量

• 检查webpack配置是否被修改
  如果自定义了vue.config.js，确认没有修改webpack的DefinePlugin配置，避免覆盖或阻止了process.env变量的注入

验证方法 #

可以在public/index.html中添加以下代码测试变量是否被正确注入：

<%= process.env.VUE_APP_BASE_URL %>

如果页面能正常显示该变量值，说明是组件中代码的问题；如果显示为空，说明变量未被正确注入，回到上述步骤排查。

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