如何设计构建后配置的vue-cli应用程序？

Question

I have a working vue-cli app, that I can build without a problem. Now, I want to package a single build that will be deployed on several servers. My problem is that, depending on the server, I'll have to tweak some simple variables (server port, API token, etc.).

Clearly, it's not a suitable solution to run several builds (based on .env files, or whatever) because of the context. I often get settings information on site and have to configure them quickly.

Before working with Webpack and all its underlying compilation process, I had a classic js file embedding the settings and I would like to produce something similar. For what I know, files created on the public folder are not reachable from vue components (with import directive) and once minified, it's not a solution to tweak settings.

Is it possible to tell vue-cli3 or webpack to keep a specific file or folder "as is"? Or maybe that there is a way cleaner solution?

Answer 1

Well, just in case someone, one day, will need to do something similar, here is my solution:

1. I create un config file in the public dir, like settings.json

2. In the App.vue component, I specify a mounted() method that will be automatically called at component launch (see VueJs components lifecycle if needed). This methods:

   1. Asynchronously query the static settings.json file to get the current file (with Axios in my case)

   2. Store the values in a dedicated store section (see VueX or any simpler store structure). In my case this looks something like:

Long story short:

Store.ts

let store = {
    ...

    // Will receive our config.json file content
    settings: {},
};

export default store;       

App.vue

mounted() {
    Axios.get('./settings.json')
        .then((response) => {
            Store.Settings = response.data;
         })
}

This may not be perfect, but there is no need of an external technology, settings reachable from every component just like your states are in the store.

Let me know if that sounds weird or there is a better solution.