刷新页面后Vue3 Dockerized丢失环境变量答案

【问题标题】：Vue3 Dockerized loseing environment variables after refreshing page刷新页面后Vue3 Dockerized丢失环境变量
【发布时间】：2022-01-16 11:13:04
【问题描述】：

问题：我在重新加载页面时得到未定义的环境变量。

我的堆栈：我正在开发具有以下架构的 WebApp：

客户端：Vue3
API：Express Nodejs

我正在使用 2 个 docker-compose 文件：

docker-compose.yml 用于开发；
docker-compose-production.yml 用于生产；

行为（获取未定义的环境变量）发生在生产模式中。

我的 docker-compose-production 文件：

version: "3"

services:

  api:
    build:
      context: ./api
    container_name: api
    ports: 
      - "3001:3001"
    environment:
      API_PORT: "3001"
    restart: always

  client:
    build:
      context: ./client
    container_name: client
    ports: 
      - "8080:80"
    environment:
      VUE_APP_BACKEND_HOST: localhost
      VUE_APP_BACKEND_PORT: "3001"
    restart: always

客户端 Dockerfile：

FROM --platform=linux/amd64 node:13-slim as build
WORKDIR /usr/src/app

COPY package*.json ./
RUN npm install

COPY . .
RUN npm run build

FROM --platform=linux/amd64 nginx:alpine
COPY --from=build /usr/src/app/dist /usr/src/app
COPY entrypoint.sh generate-env-prod.sh /
COPY nginx.conf /etc/nginx/nginx.conf

ENTRYPOINT ["/bin/sh", "/entrypoint.sh"]

要加载我的环境变量，这是我的方法：

我创建了一个“entrypoint.sh”脚本

sh ./generate-env-prod.sh > /usr/src/app/env.js
nginx -g "daemon off;"

“generate-env-prod.sh”脚本，用于在窗口中存储环境变量。*：

cat <<EOF
window.VUE_APP_BACKEND_HOST="${VUE_APP_BACKEND_HOST}"
window.VUE_APP_BACKEND_PORT="${VUE_APP_BACKEND_PORT}"
EOF

在公共目录中，我创建了一个空的 env.js 文件来存储环境变量。

在 index.html 文件中，我在该部分中添加了以下脚本以在客户端应用程序中加载环境变量：

<script src="env.js"></script>

在我的服务中，我创建了以下 config.service.js 文件，允许在生产或开发模式下加载适当的环境变量：

export default new class ConfigService {

    get(key) {
        console.log('window[key] : ', window[key])
        return this.isProduction() ? window[key] : process.env[key]
    }

    getEnvName() {
        console.log('process.env.NODE_ENV : ', process.env.NODE_ENV)
        return process.env.NODE_ENV
    }

    isProduction() {
        return this.getEnvName() === "production"
    }
}

我的 Vue main.js 文件：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './assets/tailwind.css'

createApp(App).use(router).mount('#app')

我的 App.vue 文件：

<template>
  <div>
    <NavBar />
    <router-view/>
  </div>
  
</template>

<script>
import NavBar from './components/NavBar.vue'
export default {
  components: { NavBar },
}
</script>

现在，当我运行 docker-compose -f docker-compose-production.yml up --build（生产模式）时，我在主页上时拥有所需的环境变量。如果我导航到另一个页面，它仍然有加载的环境变量。

但是，如果我重新加载页面，我的所有 window.* 变量都未定义，而 env.js 文件仍然具有该值。

我希望我就我的问题提供了足够的详细信息。即使我重新加载页面，您是否知道我应该如何继续在任何地方获取我的环境变量？

谢谢

【问题讨论】：

您是否尝试使用绝对 URL 而不是相对 URL 加载 env.js ？ <script src="/env.js"></script>
有效！非常感谢！您为我节省了数小时的搜索时间...
太棒了。下次使用浏览器开发工具而不是在互联网上发布问题可以节省更多时间。 env.js 没有在刷新时加载（并且 URL 浏览器正试图用来加载它）这一事实从“网络”选项卡中非常清楚
你是对的！谢谢你的提示！（我是初学者，我正在学习:-D）

标签： docker docker-compose environment-variables vuejs3 production

【解决方案1】：

正如评论中所建议的，我只是添加了绝对路径而不是相对路径，一切都很完美。

因此，在public/index.html，我有：

<script src="env.js"></script>

改成

<script src="/env.js"></script>

【讨论】：