Tips for creating a vue-cli application that can be customized post-build:

Question

Tips for creating a vue-cli application that can be customized post-build:

I have a functioning vue-cli application that I can easily build. However, I now need to create a single deployable build that can be used on multiple servers. The challenge is that depending on the server, I will need to adjust some basic variables such as server port and API token.

Running multiple builds based on different .env files is not a feasible solution due to the nature of the context in which I work. I often receive settings information on site and need to quickly configure them.

Prior to working with Webpack and its compilation process, I used a traditional JS file for storing settings and would like to replicate something similar. As far as I know, files stored in the public folder cannot be accessed from Vue components using imports and once minified, adjusting settings becomes even more challenging.

Is there a way to instruct vue-cli3 or webpack to keep a specific file or folder unchanged? Alternatively, is there a cleaner solution that could be implemented?

typescript webpack settings web-deployment vue-cli-3

Answer 1

Answer №1

For future reference, here is the approach I took to solve a similar issue:

I decided to create a configuration file called settings.json in the public directory.
Within the App.vue component, I implemented a mounted() method that is automatically executed when the component is initialized (refer to VueJs components lifecycle for more details). This method:
1. Has an asynchronous function that retrieves data from the static settings.json file using Axios
2. Saves these values in a dedicated section of a store structure like VueX or a simpler alternative. In my case, it resembles something along these lines:

In short:

Store.ts

let store = {
    ...

    // Will hold contents of config.json
    settings: {},
};

export default store;

App.vue

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

This solution may have its flaws, but it eliminates the need for external technologies and makes settings easily accessible across all components just like state variables in a store.

Feel free to share any thoughts or suggestions for improvement.

Answer 2

For future reference, here is the approach I took to solve a similar issue:

I decided to create a configuration file called settings.json in the public directory.
Within the App.vue component, I implemented a mounted() method that is automatically executed when the component is initialized (refer to VueJs components lifecycle for more details). This method:
1. Has an asynchronous function that retrieves data from the static settings.json file using Axios
2. Saves these values in a dedicated section of a store structure like VueX or a simpler alternative. In my case, it resembles something along these lines:

In short:

Store.ts

let store = {
    ...

    // Will hold contents of config.json
    settings: {},
};

export default store;

App.vue

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

This solution may have its flaws, but it eliminates the need for external technologies and makes settings easily accessible across all components just like state variables in a store.

Feel free to share any thoughts or suggestions for improvement.

Tips for creating a vue-cli application that can be customized post-build:

Answer №1

In short:

Similar questions

Error: zsh is unable to locate the command, even after defining it in package.json bin and installing it globally

Setting up TypeScript in Node.js

CSS disappears unexpectedly on React/Webpack website

What is preventing Typescript from inferring the type when assigning the output of a method with a return type to a variable?

Extract from Document File

"This error message states that the use of an import statement outside a module is not allowed

Using @material-ui/core/useScrollTrigger in a Next.js application: a step-by-step guide

Join and Navigate in Angular 2

Guide to assigning object values according to properties/keys

Step-by-step guide to start an AngularJs application using TypeScript

Generating a collection of objects using arrays of deeply nested objects

Once the table is created in TypeORM, make sure to insert essential master data such as types and statuses

Tips for capturing an error generated by a child component's setter?

Automatic verification of OTP in Ionic 3

Angular 6: Issues with API Get Method not executing when an integer value is passed with an empty string

Creating data types from the name of the route in vue-router route[x]

Can we easily update individual dependencies based on changes in the package.json file?

Creating types for React.ComponentType<P> in Material-UI using TypeScript

Issues with utilizing destructuring on props within React JS storybooks

A guide on incorporating Union Types in TypeScript