Vue 3 + Webpack 5环境下dotenv-webpack无法正常使用求助

以下是针对问题的具体排查和修复步骤：

1. 明确dotenv-webpack的配置路径 #

在webpack.config.js中给Dotenv插件指定.env文件的绝对路径，避免Webpack上下文路径偏差导致的加载失败：

const Dotenv = require('dotenv-webpack');
const VueLoaderPlugin = require('vue-loader/dist/plugin');

module.exports = {
  // ...其他配置项
  plugins: [
    // 将Dotenv插件放在插件数组最前端
    new Dotenv({
      path: './.env', // 指向根目录下的.env文件
      systemvars: true, // 可选：允许加载系统环境变量
      silent: true // 可选：忽略加载时的非致命错误
    }),
    new VueLoaderPlugin(),
    // ...其他插件
  ]
};

2. 确保依赖安装完整 #

同时安装dotenv-webpack及其依赖dotenv：

npm install dotenv-webpack dotenv --save-dev

3. 修正启动脚本的mode参数 #

在package.json的启动脚本中明确指定--mode development，避免默认production模式下的变量注入限制：

"scripts": {
  "serve": "webpack-cli serve --mode development"
}

4. 调整变量打印方式 #

Webpack会通过静态替换处理process.env变量，直接打印整个对象可能无法看到注入的变量，建议打印具体键值：

// main.js
console.log(process.env.VUE_APP_VAR); // 直接打印目标环境变量

5. 清理缓存并重启服务 #

Webpack可能缓存旧配置，执行以下命令清理后重启服务：

rm -rf node_modules/.cache
npm run serve

内容的提问来源于stack exchange，提问作者Natalia Gołębiewska