在 webpack 包中使用外部变量

Question

我有一个 Vue + Webpack 单页应用程序。 Webpack 在相当常见的配置中生成一个包含不同块、应用程序和供应商 js 的包。我知道将这个 spa static dist 放在 Docker 容器中。我想知道是否有一种方法可以在已经创建并打包捆绑包（dist dir）后添加 js，我可以在其中放置一些特定于我所做的每个部署的变量。我想用它来改变 api url。哪种方法最好？

Answer 1

您可以将 appconfig.json 放入您的 dist 文件夹中，然后在您的 /src/main.js 中使用 axios 获取它，例如：

// your imports here
// ...

if(process.env.NODE_ENV === 'production') {
    axios.get('./appconfig.json')
        .then(response => {
            const config = response.data;
            const host = axios.defaults.baseURL = config.baseURL;
            // other production configs

            new Vue({
                el: '#app',
                router,
                components: {App},
                template: '<App/>'
            });
        });
} else {
    // dev configs

    new Vue({
        el: '#app',
        router,
        components: {App},
        template: '<App/>'
    });
}

在 appconfig.json 中更改属性会在用户刷新页面后更改应用程序内部的设置，而无需重建或重新启动服务器。

在 webpack 包中使用外部变量

Using external variable in webpack bundle

javascript

docker

webpack

vue.js