Home > Web Front-end > JS Tutorial > body text

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

亚连
Release: 2018-06-01 09:15:38
Original
1510 people have browsed it

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/`//配置服务器地址
}
Copy after login

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>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!