从nginx到vue的钱包env变量

Question

就我的搜索而言，有几个技巧可以将动态变量放置在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/`;

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

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镜像的过程中预先编译的
有什么解决办法吗？

或者有可能将nginx/conf.d/default.conf中声明的env变量封装到apiURLs.js中吗？

Answer 1

您的怀疑是正确的。任何js文件几乎肯定会在vue构建过程中被webpack处理成一个新的捆绑文件，而不是在运行时加载。

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

查看vue项目中的package.json以了解不同的构建选项。你应该得到这样的东西：

{
"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工具中的缓存页面(