Vue CLI - 编译后将配置文件保留为外部
gra*_*lle 8 webpack vue.js vuejs2 vue-cli vue-cli-3
我正在使用 Vue CLI 开发应用程序。此应用程序是一个 Web 界面，必须与板上的 Rest API 进行通信。
所以，因为董事会会移动，董事会的 IP 会随着时间的推移而改变，这取决于我在哪里。
这是我的项目当前树：
IP 配置包含在 Settings.js 文件中：
export const Settings = {
// Server configuration
SERVER_IP: '127.0.0.1',
SERVER_PORT: '9000',
SERVER_PROTOCOL: 'http', // http or https
// Website configuration
DEBUG_MODE: true
};
在我的文件中，我使用以下语句导入此 IP：
import {Settings} from '../../Settings'
const ip = Settings.SERVER_IP;
// Do stuff
这工作正常。但问题是：当 IP 改变时，我必须重新编译所有内容。因为 Settings.js 是和其他 JS 文件一起编译的。
所以，我想知道是否有办法让配置文件保留在 dist/ 目录中，并在执行期间由我的 JS 应用程序读取。因此，每次我的应用程序服务器 IP 更改时，我都不必重新编译所有内容。
泰为您提供帮助:)
我的 Vue解决方案基于 Angular的解决方案。
您可以拥有与后端开发人员使用的完全相同的环境变量。
但不同之处在于后端代码在服务器内部执行，而前端代码只是磁盘上的文件，您可以将其作为静态文件撤回，而在撤回之前甚至没有机会运行和检查环境变量。
但是您的代码正在浏览器中执行。所以这是拥有环境的理想和唯一合适的地方。
但是，您必须事先准备此 env - 根据您的后端 env。
这是计划：
- 您从编译中排除您的设置文件（见下文）。
- 在运行 Vue 应用程序之前，您的设置文件“构造”了 env。
- 从您的代码中，您可以使用该环境，此外，您还可以在运行时更新该环境。
所以这是你的最终代码结构：
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 插件提供在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 })
旁注：
如果您想“与 DevOps 兼容”，您需要在嵌套目录中进行设置（在我们的示例中为 cfg）。这将提供在 Kubernetes/Swarm 中进行挂载的能力，而不会覆盖整个 dist 目录。
您可以在public 目录中创建一个 config.json 文件，然后在 main js 中您可以获取它并加载配置文件。现在您的 dist 使用此 config.json 创建。
fetch('/config.json').then(res => res.json()).then(config => {
.......
})
| 归档时间： |
|
| 查看次数： |
3666 次 |
| 最近记录： |