Question

我已经使用Vue-cli使用Vue.js开发了SPA。 Vue-cli配置webpack以便在开发和生产环境中构建webapp。基本上捆绑所有.vue模板文件并构建index.html + js捆绑包。绑定是按照相关文件之间的“ require”（或使用ES6语法导入）路径完成的：这意味着，例如，如果我这样做：

import config from '@/conf/config.json'

let res = await Axios.get (config.API_ROOT + '/hello')

它将创建捆绑文件，其中包含以前的代码以及src / conf / config.json的内容。

这基本上还不错，但是现在我将向您展示一个问题：

假设您正在构建一个docker映像以通过nginx Web服务器为您的spa服务。您想更改配置参数而不安装卷（在kubernetes基础架构上非常痛苦），因此决定使用环境变量。 dockerfile看起来像这样

FROM some/node:image AS build
COPY . /dir
COPY package*.json /dir
RUN npm i
RUN npm run build

FROM some/nginx:image
COPY --from=build /dir/dist /usr/share/nginx/html
CMD /usr/share/nginx/html/static/config.json.template < envsubst > /usr/share/nginx/html/static/config.json && nginx -g "daemon off;"

和config.json文件shuold看起来像

{
    API_ROOT : "$ENV_API_ROOT
}

这样，我将创建一个config.json模板，该模板将在容器启动时使用envsubst进行编译。我可以在基础架构中预期的每个环境中构建和使用相同的映像，我只需要为env变量编写适当的值即可！

唯一的技巧是，我仍然应该能够在其余的代码库中要求/导入该文件。这意味着当我运行“ npm run build”时，webpack应该在一个已知的目录（可通过模式“ @ / x / y / etc”引用）中选择它，然后将其复制到“静态”目录中而不进行捆绑（否则，不知道在哪个文件上运行envsubst），并更新对该文件的所有引用

我已经进行了广泛的搜索，但没有发现任何真正有用的东西。有没有人对此问题有经验？

谢谢！

为容器化的Vue-cli应用程序创建多环境配置

0 个答案: