我的Vue解决方案基于Angular的解决方案。
你可以像后端开发者一样拥有环境变量。
但不同的是，后端代码在服务器内执行，而前端代码只是存储在磁盘上的静态文件，没有机会在交付到浏览器之前运行和检查环境变量。
然而，你的代码必须在浏览器内执行。因此，这是拥有环境变量的理想和唯一适当的位置。因此，你需要提前准备好这个环境-根据你的后端环境。
以下是计划：
- 你从编译中排除你的设置文件（见下文）。
- 你的设置文件在运行Vue应用程序之前“构建”环境。
- 从你的代码中使用该环境，并且你还可以在运行时更新此环境。
所以这里是你最终的代码结构：
root_project_dir:
├─> cfg
│ └── settings.js
├─> public
│ ├── favicon.ico
│ └── index.html
├─> src
│ ├── App.vue
│ ├─> assets
│ │ └── logo.png
│ ├─> components
│ ├─> layouts
│ ├── main.js
│ ├─> plugins
│ ├─> router
│ ├─> store
│ └─> views
└── vue.config.js
创建设置文件 cfg/settings.js：
(function(window) {
window.__env = window.__env || {};
window.__env.api = {
"url": "http://127.0.0.1:8000",
"timeout": 80000
};
window.__env.captcha = {
"enabled": true,
"key": "Mee1ieth1IeR8aezeiwi0cai8quahy"
};
window.__env.rollbar = {
"enabled": true,
"token": "zieriu1Saip5Soiquie6zoo7shae0o"
};
window.__env.debug = true;
})(this);
在vue.config.js中为Webpack Copy plugin提供指令，在npm run build阶段复制cfg文件（您无法更改此名称）：
module.exports = {
chainWebpack: config => {
config.plugin("copy").tap(([pathConfigs]) => {
pathConfigs.unshift({
from: "cfg",
to: "cfg"
});
return [pathConfigs]})
},
transpileDependencies: ["vuetify"]
};
检查生成的 webpack 配置并查找是否应用（在输出底部）：
检查生成的 webpack 配置并查找是否已应用（在输出底部）：
vue inspect
现在，当您构建该项目时，您将在生成目录中看到它：
dist
├─> cfg
│ └── settings.js
├─> css
│ ├── app.06b1fea6.css
│ └── chunk-1f2efba6.a298b841.css
├── favicon.ico
├─> img
│ └── logo.09e0e4e1.png
├── index.html
└─> js
├── app.8fc75c19.js
├── app.8fc75c19.js.map
└── chunk-vendors.1ab49693.js.map
在你打开应用程序之前，你可以在 public/index.html 中运行这个设置：
<body>
<script src="/cfg/settings.js"></script>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
现在你的窗口里有它：
从代码的任何位置，你都可以访问这个环境变量：
Vue.use(VueReCaptcha, { siteKey: window.__env.captcha.key })
附注:
如果你想成为“DevOps兼容”，你需要在一个嵌套目录（例如cfg）中设置。这将使得在Kubernetes/Swarm中进行挂载而不会覆盖整个dist目录的能力。
