在webpack包中使用外部变量

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属性即可更改应用程序内的设置。