


Detailed explanation of how vue packages different domain names according to the environment's passing parameters
This time I will bring you a detailed explanation of how vue packages different domain names according to the environment passing parameters. What are the precautions for vue to package different domain names according to the environment passing parameters. Here is a practical case, let's take a look.
During project development, the front-end is very troubled when configuring the back-end api domain name. It often appears:
Local development environment: api-dev.demo.com
Test environment: api-test.demo.com
Online production environment: api.demo.com,
This time it is packaged in the Vue.js project, and I will teach you how to do it:
Use npm run build -- xxx
, according to the passed parameter xxx to determine different environments and give different domain name configurations.
1. Modification of /config/dev.env.js in the project:
Added: HOST: '"dev"'
'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', HOST: '"dev"' })
2. Modification of /config/prod.env.js in the project:
Get the parameters passed in:
'use strict' let HOST = process.argv.splice(2)[0] || 'prod'; console.log(HOST); module.exports = { NODE_ENV: '"production"', HOST: '"'+HOST+'"' }
3. Modification of ajax encapsulation in the project :
/** ** 设置API接口域名 **/ let apiUrl = ''; // 根据 process.env.HOST 的值判断当前是什么环境 // 命令:npm run build -- test ,process.env.HOST就设置为:'test' let HOST = process.env.HOST; HOST = HOST === 'prod' ? '' : '-' + HOST; apiUrl = 'http://api'+HOST+'.demo.com'; axios.defaults.baseURL = apiUrl;
4. Finally type the command:
npm run build -- test
Note – Yes 2 horizontal bars, followed by parameters, so process.env.HOST will get the parameter 'test',
apiUrl = 'http://api-test.demo.com'
If prod is released and packaged online,npm run build -- prod
apiUrl = 'http://api.demo.com'
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
vue makes full selection and inverse selection functions
##vue.js element-ui tree tree shape How to modify iview
The above is the detailed content of Detailed explanation of how vue packages different domain names according to the environment's passing parameters. 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

Delivery Optimization is a feature that helps Windows Update and Windows Store run and deliver updates faster. Cache files in Delivery Optimization are supposed to be deleted after a while, but for some of our readers they keep piling up and taking up unnecessary space. Is it safe to delete delivery optimization files? Yes, it is safe to delete delivery optimization files, and in this article, you will find out how easy it is to do so in Windows 11. Although it is not recommended to manually delete delivery optimization files, it is possible to do so automatically. How to delete delivery optimization files on Windows 11? Click the search bar, type Disk Cleanup, and open the tool from the results. If you have multiple drives, select the drive with your system (usually C:

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

C++ parameter type safety checking ensures that functions only accept values of expected types through compile-time checks, run-time checks, and static assertions, preventing unexpected behavior and program crashes: Compile-time type checking: The compiler checks type compatibility. Runtime type checking: Use dynamic_cast to check type compatibility, and throw an exception if there is no match. Static assertion: Assert type conditions at compile time.

i9-12900H is a 14-core processor. The architecture and technology used are all new, and the threads are also very high. The overall work is excellent, and some parameters have been improved. It is particularly comprehensive and can bring users Excellent experience. i9-12900H parameter evaluation review: 1. i9-12900H is a 14-core processor, which adopts the q1 architecture and 24576kb process technology, and has been upgraded to 20 threads. 2. The maximum CPU frequency is 1.80! 5.00ghz, which mainly depends on the workload. 3. Compared with the price, it is very suitable. The price-performance ratio is very good, and it is very suitable for some partners who need normal use. i9-12900H parameter evaluation and performance running scores

Hyperbolic functions are defined using hyperbolas instead of circles and are equivalent to ordinary trigonometric functions. It returns the ratio parameter in the hyperbolic sine function from the supplied angle in radians. But do the opposite, or in other words. If we want to calculate an angle from a hyperbolic sine, we need an inverse hyperbolic trigonometric operation like the hyperbolic inverse sine operation. This course will demonstrate how to use the hyperbolic inverse sine (asinh) function in C++ to calculate angles using the hyperbolic sine value in radians. The hyperbolic arcsine operation follows the following formula -$$\mathrm{sinh^{-1}x\:=\:In(x\:+\:\sqrt{x^2\:+\:1})}, Where\:In\:is\:natural logarithm\:(log_e\:k)

Detailed explanation of VSCode functions: How does it help you improve work efficiency? With the continuous development of the software development industry, developers' pursuit of work efficiency and code quality have become important goals in their work. In this process, the choice of code editor becomes a key decision. Among many editors, Visual Studio Code (VSCode for short) is loved by the majority of developers for its powerful functions and flexible scalability. This article will introduce some functions of VSCode in detail and discuss

PyInstaller: Independence of Python applications PyInstaller is an open source python packaging tool that packages Python applications and their dependencies into an independent executable file. This process eliminates dependence on the Python interpreter while allowing applications to run on a variety of platforms, including Windows, MacOS, and Linux. Packaging Process The packaging process of PyInstaller is relatively simple and involves the following steps: pipinstallpyinstallerpyinstaller--onefile--windowedmain.py--onefile option creates a single

PyInstaller is a revolutionary tool that empowers Python applications beyond their original scripting form. By compiling Python code into standalone executable files, PyInstaller unlocks a new realm of code distribution, deployment, and maintenance. From a single script to a powerful application In the past, Python scripts only existed in a specific Python environment. Distributing such a script requires users to install Python and the necessary libraries, which is a time-consuming and cumbersome process. PyInstaller introduces the concept of packaging, combining Python code with all required dependencies into a single executable file. The Art of Code Packaging PyInstaller’s Work
