如何在VueJS SPA组件运行时访问环境变量？

一、Webpack原生解决方案：用DefinePlugin批量注入 #

Webpack官方推荐的DefinePlugin是最优雅的环境变量注入方式，能让你在Vue组件运行时直接访问process.env变量，且支持批量配置，不用每次新增变量都修改Webpack脚本。

步骤如下：

1. 安装dotenv（可选但推荐）：通过它加载.env文件管理不同环境的变量，避免硬编码：

   npm install dotenv --save-dev
   

2. 修改Webpack配置文件：
   在webpack.config.js中引入dotenv并配置DefinePlugin：

   const webpack = require('webpack');
   const dotenv = require('dotenv');
   
   // 根据当前环境加载对应.env文件（比如.env.staging、.env.production）
   const envFile = `.env.${process.env.NODE_ENV || 'development'}`;
   const env = dotenv.config({ path: envFile }).parsed;
   
   // 转换为Webpack需要的格式
   const envKeys = Object.keys(env).reduce((acc, key) => {
     acc[`process.env.${key}`] = JSON.stringify(env[key]);
     return acc;
   }, {});
   
   module.exports = {
     // ...其他Webpack配置
     plugins: [
       new webpack.DefinePlugin(envKeys)
     ]
   };
   

3. 创建对应环境的.env文件：
   比如在根目录创建.env.staging：

   COMMIT_HASH=abc1234
   SHOW_DEV_INFO=true
   

4. 在Vue组件中直接使用：

   <script>
   export default {
     mounted() {
       console.log(process.env.COMMIT_HASH); // 输出abc1234
       if (process.env.SHOW_DEV_INFO) {
         // 展示开发信息逻辑
       }
     }
   }
   </script>
   

二、Vue CLI项目更省心 #

如果是Vue CLI搭建的项目，已经内置了环境变量处理，无需手动配置Webpack：

1. 创建环境变量文件：
   根目录下创建.env、.env.staging等文件，变量名必须以VUE_APP_开头：

   # .env.staging
   VUE_APP_COMMIT_HASH=abc1234
   VUE_APP_ENV=staging
   

2. 组件中直接访问：

   <script>
   export default {
     mounted() {
       console.log(process.env.VUE_APP_COMMIT_HASH);
     }
   }
   </script>
   

3. 指定环境构建：
   在package.json的scripts里添加对应命令：

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

针对COMMIT_HASH的动态注入补充 #

如果COMMIT_HASH是CI/CD流水线中动态生成的，无需写入.env文件，直接在构建命令中注入即可：

• 原生Webpack项目：

  COMMIT_HASH=$(git rev-parse --short HEAD) npm run build
  

• Vue CLI项目：

  VUE_APP_COMMIT_HASH=$(git rev-parse --short HEAD) npm run build:staging
  

这种方式既高效又灵活，新增环境变量只需在.env中添加或构建命令注入，无需修改Webpack配置。

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