Frontend Dynamic deployment configuration for Vue

参考：

https://stackoverflow.com/questions/53010064/pass-environment-variable-into-a-vue-app-at-runtime

 

1. Add JS file:  /public/config.js

const config = (() => {
　　return {
　　　　"VUE_APP_BASEURL":"https://channel-dev.iptiqtap.com/eb-service-partner",
　　};
})();   

2. Modify HTML file to add additional line:  /public/index.html

<script src=<%= BASE_URL %>"config.js"></script>

3. Modify JS file: /src/api/base.js

let baseUrl = {
    api: "",
};
baseUrl.api = config.VUE_APP_BASEURL || process.env.VUE_APP_BASEURL;
export const API = baseUrl.api

4. Modify JS file: /vue.config.js

publicPath: process.env.NODE_ENV === 'production' ? './' : './',

5. package.json 

// Load config values directly from config.js
module: {
    rules: [{
        test: /config.*config\.js$/,
        use: [{
            loader: 'file-loader',
            options: {
                name: 'config.js'
            },
        }]
    }]
}

 

// Exclude config.js from built package
if (process.env.NODE_ENV === "production") {
    config.plugin("copy").tap(opts => {
        opts[0][0].ignore.push({
            glob: "config.js"
        });
        return opts;
    });
}