Detailed description of project-related configuration files extracted during vue-cli packaging, vue-cli configuration file

Detailed description of project-related configuration files extracted during vue-cli packaging, vue-cli configuration file

When using vue-cli for development, you often need to dynamically configure some settings, such as the request address of the interface (axios. defaults. baseURL), these settings may need to be set after the project compilation, so in vue-cli, We need to detach these configuration files, so that webpack will not compile the configuration files.

First, we need to create a js file under/static as the configuration file.

The content is as follows:

Window. g = {AXIOS_TIMEOUT: 10000, SERVICE_CONTEXT_PATH: 'http: // 10.200.199.84: 9090/'// Configure the server address}

All configurations are injected into an attribute of the window object. You can customize this attribute.

Then introduce this js in index.html.

<Script src = "/static/js/config. js"> </script>

When used in a project, use window. g to directly call the content of this configuration file.

This effect will occur when the configuration is packaged.

We can see that the configuration file will not be packaged as it is, so when we hand over the compiled front-end project to the deployment personnel for deployment, we don't need to ask the background address in advance, the deployment personnel can directly modify the content in the configuration to determine the server address.

In this way, project-related configuration files can be extracted.

The detailed description of the configuration files related to the project is shared with you through the vue-cli package. I hope you can provide a reference and support for the customer.