Vue.js项目中.env文件无法读取，process.env返回undefined如何解决？

核心原因 #

poi不像Vue CLI那样自动识别VUE_APP_前缀的环境变量并注入客户端代码，需要手动配置webpack的DefinePlugin来完成变量注入。

解决步骤 #

1. 确认dotenv依赖状态 #

虽然你提到已安装，可再次确认依赖是否正常：

yarn add dotenv --dev

2. 配置poi加载.env并注入变量 #

在vue-dash根目录创建或编辑poi.config.js，添加以下配置：

const dotenv = require('dotenv');
const webpack = require('webpack');

// 加载根目录的.env文件
dotenv.config({ path: './.env' });

// 筛选所有VUE_APP_前缀的变量
const envVariables = {};
Object.keys(process.env).forEach(key => {
  if (key.startsWith('VUE_APP_')) {
    envVariables[`process.env.${key}`] = JSON.stringify(process.env[key]);
  }
});

module.exports = {
  configureWebpack: {
    plugins: [
      // 通过webpack插件将变量注入客户端代码
      new webpack.DefinePlugin(envVariables)
    ]
  }
};

3. 重启poi开发服务 #

修改配置文件后必须重启服务，否则新配置不会生效。

额外检查项 #

• 确认.env文件放在vue-dash的根目录，与poi.config.js同层级；
• 检查.env文件内的变量名是否拼写正确，比如VUE_APP_BASE_API_URL有没有多余空格或大小写错误；
• 若使用旧版poi（v9及以下），configureWebpack的配置方式可能不同，需对应调整为poi旧版的webpack配置格式。

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