


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
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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Share the simple and easy-to-understand PyCharm project packaging method. With the popularity of Python, more and more developers use PyCharm as the main tool for Python development. PyCharm is a powerful integrated development environment that provides many convenient functions to help us improve development efficiency. One of the important functions is project packaging. This article will introduce how to package projects in PyCharm in a simple and easy-to-understand way, and provide specific code examples. Why package projects? Developed in Python

Fermat's last theorem, about to be conquered by AI? And the most meaningful part of the whole thing is that Fermat’s Last Theorem, which AI is about to solve, is precisely to prove that AI is useless. Once upon a time, mathematics belonged to the realm of pure human intelligence; now, this territory is being deciphered and trampled by advanced algorithms. Image Fermat's Last Theorem is a "notorious" puzzle that has puzzled mathematicians for centuries. It was proven in 1993, and now mathematicians have a big plan: to recreate the proof using computers. They hope that any logical errors in this version of the proof can be checked by a computer. Project address: https://github.com/riccardobrasca/flt

Title: Learn more about PyCharm: An efficient way to delete projects. In recent years, Python, as a powerful and flexible programming language, has been favored by more and more developers. In the development of Python projects, it is crucial to choose an efficient integrated development environment. As a powerful integrated development environment, PyCharm provides Python developers with many convenient functions and tools, including deleting project directories quickly and efficiently. The following will focus on how to use delete in PyCharm

PyCharm is a powerful Python integrated development environment that provides a wealth of development tools and environment configurations, allowing developers to write and debug code more efficiently. In the process of using PyCharm for Python project development, sometimes we need to package the project into an executable EXE file to run on a computer that does not have a Python environment installed. This article will introduce how to use PyCharm to convert a project into an executable EXE file, and give specific code examples. head

How to Make a GroceryList on iPhone in iOS17 Creating a GroceryList in the Reminders app is very simple. You just add a list and populate it with your items. The app automatically sorts your items into categories, and you can even work with your partner or flat partner to make a list of what you need to buy from the store. Here are the full steps to do this: Step 1: Turn on iCloud Reminders As strange as it sounds, Apple says you need to enable reminders from iCloud to create a GroceryList on iOS17. Here are the steps for it: Go to the Settings app on your iPhone and tap [your name]. Next, select i

Solution to the error when starting the react project: 1. Enter the project folder, start the project and view the error message; 2. Execute the "npm install" or "npm install react-scripts" command; 3. Execute "npm install @ant-design/ pro-field --save" command.

As a technology blogger, Fengfeng prefers all kinds of tossing. I have previously introduced ChatGPT to connect to WeChat, DingTalk and Knowledge Planet (if you haven’t seen it, you can read the previous article). Recently, when I looked at open source projects , discovered a ChatGPTWebUI project. Thinking that I have never connected ChatGPT to WebUI before, it is really good to have this open source project to use. Here are the practical installation steps to share with everyone. The installation official provides many installation methods on Github’s project documentation, including manual installation, docker deployment, and remote deployment. It’s amazing that when choosing a deployment method, I thought about simplicity at first.

IDEA (IntelliJIDEA) is a powerful integrated development environment that can help developers develop various Java applications quickly and efficiently. In Java project development, using Maven as a project management tool can help us better manage dependent libraries, build projects, etc. This article will detail the basic steps on how to create a Maven project in IDEA, while providing specific code examples. Step 1: Open IDEA and create a new project Open IntelliJIDEA
