我的Vue解决方案基于solution for Angular.
您可以使用与后端开发人员完全相同的环境变量.
但区别在于，后端代码是在服务器内部执行的，而前端代码只是磁盘上的文件，您可以将其作为静态文件撤回，而在撤回之前，它们甚至没有机会运行和判断环境变量.
但是你的代码是在浏览器中执行的.因此，这是理想的，也是唯一一个拥有env的合适地方.
然而，你必须事先准备好这个环境——根据你的后端环境.
计划如下:
- 从编译中排除设置文件(见下文).
- 在运行Vue应用程序之前，设置文件会"构造"环境.
- 从代码中可以使用该环境，还可以在运行时更新该环境.
下面是您的最终代码 struct :
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:
/*
This file goes as an asset without any of compilation even after build process.
Thus, it can be replaced in a runtime by different file in another environment.
Example for Docker:
docker run -v ./local_cfg_dir:cfg image:tag
*/
(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);
向Webpack Copy plugin提供在vue.config.js中的npm run build阶段复制cfg文件的说明(您不能更改此名称):
module.exports = {
chainWebpack: config => {
config.plugin("copy").tap(([pathConfigs]) => {
pathConfigs.unshift({
from: "cfg",
to: "cfg"
});
return [pathConfigs]})
},
transpileDependencies: ["vuetify"]
};
判断生成的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 })
Sidenote:
如果你想"与DevOps兼容"，你需要在一个嵌套的目录中有一个设置(在我们的例子中是cfg).这将提供在Kubernetes/Swarm中进行装载的能力，而不会覆盖dist的整个目录.
