


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

AI Hentai Generator
Generate AI Hentai for free.

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

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

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.

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 an open source library that allows developers to compile Python code into platform-independent self-contained executables (.exe or .app). It does this by packaging Python code, dependencies, and supporting files together to create standalone applications that can run without installing a Python interpreter. The advantage of PyInstaller is that it removes dependency on the Python environment, allowing applications to be easily distributed and deployed to end users. It also provides a builder mode that allows users to customize the application's settings, icons, resource files, and environment variables. Install PyInstal using PyInstaller to package Python code
