Regarding the issue of extracting project-related configuration files when packaging vue-cli (detailed tutorial)

Below I will share with you a detailed explanation of project-related configuration files when packaging based on vue-cli. It has a good reference value and I hope it will be helpful to everyone.

Preface: 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 is compiled, so In vue-cli, we need to extract these configuration files to prevent webpack from compiling the configuration files.

First of all, we need to create a new js file under /static as the configuration file

The content inside is as follows:

window.g={
 AXIOS_TIMEOUT:10000,
 SERVICE_CONTEXT_PATH:`http://10.200.199.84:9090/`//配置服务器地址
}

Here will be All configurations are injected into a property of the window object. You can customize this property

and then introduce this js

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

in index.html to use in the project When using window.g, directly use window.g to call the contents of this configuration file.

When packaging is done after this configuration, the following effect will occur

You can see that the configuration file here will be output as it is and will not be packaged, then when we When handing over the compiled front-end project to the deployment personnel for deployment, there is no need to ask about the background address in advance. The deployment personnel can directly determine the server address by modifying the content in the configuration.

So in this way, the project-related configuration files can be extracted.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

JavaScript Gypsophila navigation bar implementation method

vue.js computed, filter, get, set Detailed explanation of usage and difference

Detailed explanation of the whole process from buying a domain name to using pm2 to deploy node.js project

The above is the detailed content of Regarding the issue of extracting project-related configuration files when packaging vue-cli (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!