时间戳

首页 > 解决方案 > 钱包环境变量从 nginx 到 vue

docker - 钱包环境变量从 nginx 到 vue

问题描述

据我搜索，有几个技巧可以将动态变量放入nginx/conf.d/default.conf.
相反，我想在 apiURLs.js 文件中激活 env 变量，该文件将加载到 vue 文件中。

# apiURLs.js
export const apiUrls = {
    auth: "http://{{IP_ADDRESS}}:8826/auth/",
    service1: "http://{{IP_ADDRESS}}:8826/",
    service2: "http://{{IP_ADDRESS}}:8827/"
};

# in xxx.vue
let apiUrl = `${apiUrls.auth}login/`;

我envsubst在 docker-compose.yml 中尝试了

environment:
  - IP_ADDRESS
command: /bin/sh -c "envsubst < /code/src/apiUrls.js | tee /code/src/apiUrls.js && nginx -g 'daemon off;'"

当我进入 docker 容器并确认 apiUrls.js 已被替换时，它似乎可以工作。

但是，当我在浏览器中检查前端应用程序并通过 chrome 开发人员工具检查 api 时，结果发现引用的 api 仍然是带有 env 参数的低 url 字符串，即http://%24%7Bip_address%7D:8826/auth/login.

我怀疑vue项目是在制作docker镜像时预编译的。
有什么解决办法吗？

或者是否可以将声明的 env 变量保存nginx/conf.d/default.conf到apiURLs.js？

标签： dockervue.jsnginx

解决方案

你的怀疑是正确的。几乎可以肯定，任何 js 文件都会在 vue 构建期间被 webpack 处理成一个新的捆绑文件，而不是在运行时加载。

如果您可以在 docker 中导航到 vue 项目并重新运行构建，那么您的环境变量应该会更新。

签package.json入 vue 项目以获取不同的构建选项。你应该得到类似的东西：

{
  "name": "vue-example",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
//...

并能够重建它npm run build

（同样以明显的名义，请记住在检查更新的站点时禁用chrome dev工具中的缓存页面）

推荐阅读