Web Front-end
JS Tutorial
How to use Npm run build in vue to pass different parameters according to the environment
How to use Npm run build in vue to pass different parameters according to the environment
This time I will show you how to use Npm run build in vue to pass different parameters according to the environment, and use Npm run build in vue to pass different parameters according to the environment. What are the precautions?. Here are the actual cases. 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:
New addition: HOST: '"dev"'
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
HOST: '"dev"'
})2. Modify /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. Project Modify the ajax package:
/** ** 设置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 – it is two horizontal bars, followed by parameters, so that process.env.HOST will get the parameter 'test',
apiUrl = 'http://api-test.demo.com'
If the online prod is released and packaged, 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:
Detailed explanation of the underlying logic of new() in JS
How to use Koa2 file upload and download
The above is the detailed content of How to use Npm run build in vue to pass different parameters according to the environment. 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
Unable to boot into Windows recovery environment
Feb 19, 2024 pm 11:12 PM
Windows Recovery Environment (WinRE) is an environment used to repair Windows operating system errors. After entering WinRE, you can perform system restore, factory reset, uninstall updates, etc. If you are unable to boot into WinRE, this article will guide you through fixes to resolve the issue. Unable to boot into the Windows Recovery Environment If you cannot boot into the Windows Recovery Environment, use the fixes provided below: Check the status of the Windows Recovery Environment Use other methods to enter the Windows Recovery Environment Did you accidentally delete the Windows Recovery Partition? Perform an in-place upgrade or clean installation of Windows below, we have explained all these fixes in detail. 1] Check Wi
What are the differences between Python and Anaconda?
Sep 06, 2023 pm 08:37 PM
In this article, we will learn about the differences between Python and Anaconda. What is Python? Python is an open source language that places great emphasis on making the code easy to read and understand by indenting lines and providing whitespace. Python's flexibility and ease of use make it ideal for a variety of applications, including but not limited to scientific computing, artificial intelligence, and data science, as well as creating and developing online applications. When Python is tested, it is immediately translated into machine language because it is an interpreted language. Some languages, such as C++, require compilation to be understood. Proficiency in Python is an important advantage because it is very easy to understand, develop, execute and read. This makes Python
Microsoft Win11 24H2 Build 26100 has found multiple bugs and installation is not recommended
Apr 07, 2024 pm 09:22 PM
The latest news from this site on April 7 is that multiple bugs have been discovered in Microsoft Win1124H2Build26100, and it is temporarily not recommended to install it on commonly used devices. Windows 1124H2 is still in a very unstable stage. Although Microsoft will gradually fix the problem through monthly cumulative updates, it may take some time before this version is officially released and brings a stable experience to everyone. If any user has installed the 24H2 version image and encountered problems, it is recommended that the user reinstall it. It is now relatively stable. ZacBowden, encountered a Blue Screen of Death when trying to reset Windows 1124H2Build26100 version, and the "Reset this PC" function was supposed to fix system problems, but instead
Windows 11 Build 22616 brings back taskbar drag and drop functionality
May 04, 2023 pm 06:04 PM
Yes, it's time for us to talk about the new Insider Preview for Windows 11. If you're up to date on new operating systems, you'll know that Microsoft launched a brand new version in the Dev and Beta channels today. What's new you ask? Well, this time we talk about more fixes and enhancements, as well as improvements to remove some system trays. In fact, build 22616 returns the system tray to its state on public builds of Windows 11, which means the highlighting consistency improvements have been removed. What's new in Build 22616 for Windows 11? You may also wonder why this happens. this
Windows 11 preview update supports deeper OneDrive integration
May 01, 2023 pm 07:07 PM
Windows 11 Build 25145 is now available to users in the development channel and includes some minor new features. For example, Build25145 enables tighter integration between OneDrive and Settings. Likewise, it also improves Narrator braille driver support and adds a new local administrator password solution. These improvements are only available to members of the Development Channel. According to the release notes, Windows 11 Build 25145 adds a braille driver solution. The company says braille devices will now work better as they can switch smoothly between Narrator and third-party screen readers because Narrator automatically changes the braille driver. to start
The search bar in Task Manager has been enabled in Windows 11 Beta 22623.891.
May 09, 2023 am 08:49 AM
Microsoft released two more Windows 11 betas this week. Windows 11 Beta Build 22623.891 brings a search bar to Task Manager. Search bar in Task Manager Search bars were recently discovered in DevChannel, but users have to enable them manually. Users who publish on DevChannel and want to try out the feature can follow the instructions in Martin's article to learn how to use the ViveTool utility to get the search bar. This time, however, the search bar is official. Microsoft has enabled the feature in the Beta channel. The search box is located at the top of the Task Manager window and is permanent
Windows 11 Insider Preview Build 22616 brings the Controller Bar and restores the option to rearrange icons in the system tray
Apr 30, 2023 pm 11:40 PM
Microsoft has pushed Windows 11 Insider Preview Build 22616 to the Dev and Beta channels. The latest version offers a new way to launch games quickly and fixes annoying system tray-related issues. 11InsiderPreview What's New in Build 22616 System tray users criticized Microsoft for removing the ability to rearrange icons in the system tray when it released Build 22581, including icons in the system tray's "Show Hidden Icons" pop-up. This feature has been restored in Build22616. However, this may be a temporary fix as Microsoft says it is working on
Windows 11 Build 22000.917 is now in the release preview channel
May 17, 2023 pm 03:52 PM
you guessed right! It’s time for us to take a look at the new Windows 11 Insider Preview that Microsoft just released. Yes, the Redmond-based tech giant has released the new build for Windows 11 Insiders on the ReleasePreview channel. Build 22000.917 or KB5016691 enables IT administrators to add and manage languages remotely. Additionally, Microsoft Defender for Endpoint received updates to better identify and block ransomware and advanced attacks. KB5016691 comes with Windows 11
