When vue-cli is packaged, the project-related configuration files are extracted

Foreword: When using vue-cli for development, it is often necessary 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 It is necessary to extract these configuration files and prevent webpack from compiling the configuration files.

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

The contents are as follows:

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

Here all the configuration is injected into a property of the window object, you can customize this property

Then import this js in index.html

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

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

When packaging after this configuration, it will have such an effect.

You can see that the configuration file here will be output as it is and will not be packaged, so when we hand over the compiled front-end project to the deployer for deployment, there is no need to ask the background address in advance. Now, the deployer 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.