Question

我有一个Vue + Webpack单页应用程序。 Webpack在相当普通的配置中生成具有不同块，应用程序和供应商js的捆绑包。我知道将此spa静态dist放入Docker容器中。我想知道是否有一种方法可以在已创建并打包捆绑包之后添加js（dist dir），在其中可以放置一些特定于我进行的每个部署的变量。我想使用它来更改api网址。哪种方法是最好的方法？

Answer 1

您可以将appconfig.json放入dist文件夹中，并与axios一起放入/src/main.js中，例如：

// 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包中使用外部变量

1 个答案: