如何在Vue模板中获取无VUE_APP前缀的环境变量？

针对你遇到的无法修改环境变量命名、需要直接使用无前缀变量的场景，以下是几个可落地的解决办法：

1. 修改Vue CLI配置，自定义注入环境变量 #

通过Vue CLI的webpack配置扩展，直接将需要的环境变量（不管是否带前缀）注入到前端代码中。可以借助webpack.DefinePlugin实现：

方式1：批量注入.env文件中的所有变量 #

在项目根目录创建/修改vue.config.js：

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

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        ...Object.fromEntries(
          Object.entries(dotenv.parse(fs.readFileSync('.env'))).map(([key, value]) => [
            `process.env.${key}`,
            JSON.stringify(value)
          ])
        )
      })
    ]
  }
};

如果需要区分开发/生产环境，可以根据process.env.NODE_ENV读取对应的.env文件（比如.env.production）。

方式2：针对性注入指定变量 #

如果只需要特定几个变量，避免全量注入的安全风险，可单独配置：

const webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env.APP_URL': JSON.stringify(process.env.APP_URL),
        'process.env.OTHER_VAR': JSON.stringify(process.env.OTHER_VAR)
        // 按需添加需要的变量
      })
    ]
  }
};

2. 通过后端接口暴露环境变量 #

既然后端有constant.php，可以新增一个简单接口，将前端需要的环境变量返回，前端在初始化时获取并存储：

后端接口示例（PHP） #

// 比如创建/api/get-env.php
<?php
header('Content-Type: application/json');
// 从constant.php中读取需要的变量
require_once 'constant.php';
echo json_encode([
  'APP_URL' => APP_URL,
  'API_BASE' => API_BASE
]);
?>

前端获取示例 #

在main.js中初始化时请求接口：

import axios from 'axios';

// 请求环境变量接口
axios.get('/api/get-env')
  .then(res => {
    // 将变量挂载到全局或Vue实例
    window.__APP_ENV__ = res.data;
    // 初始化Vue应用
    new Vue({
      render: h => h(App)
    }).$mount('#app');
  })
  .catch(err => {
    console.error('获取环境变量失败:', err);
    // 兜底方案，比如用window.location.origin
    window.__APP_ENV__ = { APP_URL: window.location.origin + '/' };
    new Vue({
      render: h => h(App)
    }).$mount('#app');
  });

之后在组件模板或脚本中就可以通过window.__APP_ENV__.APP_URL使用变量。

注意事项 #

• 直接通过webpack注入环境变量时，变量会被打包到前端代码中，绝对不要包含敏感信息（如密钥、数据库密码等）。
• 后端接口方式更安全，且可以灵活控制返回的变量，适合需要动态获取环境变量的场景；webpack注入方式则更高效，适合构建时确定的静态变量。

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