Detailed explanation of Vue project packaging steps by environment
This time I will bring you a detailed explanation of the steps for packaging the Vue project by environment. What are the precautions for packaging the Vue project by environment? The following is a practical case, let's take a look.
In project development, our projects are generally divided into development version, test version, Pre version, and Prod version. The default environments of Vue-cli are only dev and prod. In the past, every time I wanted to release a test version or Pre version, I had to modify the API address in the source code and then package it, which was very troublesome. It would be perfect if it could be packaged according to different environments. I have collected a lot of information on the Internet, and now I can package the program according to the environment. As for how to do it, let’s stay and see.Step 1: Installationcross-env##Run the following command in the project directory to install cross-env, My IDE is webstorm. It needs to be run directly in the Terminal window in the IDE. It is also possible to locate the project root directory through the CMD of Windows or the Terminal of Linux and run the following command.
npm i --save-dev cross-envStep 2: Modify the parameters in each environment Add test.env.js and pre.env.js in the config/ directory. Modify the content in prod.env.js. The modified content is as follows:
'use strict'
module.exports = {
NODE_ENV: '"production"',
EVN_CONFIG:'"prod"',
API_ROOT:'"/apis/v1"'
}Study and modify the contents of the test.env.js and pre.env.js files respectively. The modified content is as follows:
'use strict'
module.exports = {
NODE_ENV: '"testing"',
EVN_CONFIG:'"test"',
API_ROOT:'"/test/apis/train"'
}
'use strict'
module.exports = {
NODE_ENV: '"presentation"',
EVN_CONFIG:'"pre"',
API_ROOT:'"/pre/apis/train"'
}Modify the content of the dev.env.js file. The modified content is as follows. The dev environment is configured with a service proxy, and the api before API_ROOT is the configured proxy address.
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
VN_CONFIG: '"dev"',
API_ROOT: '"api/apis/v1"'
})Step 3: Modify the project package.json filePersonalize the scripts content in the package.json file and add new ones The parameters in the packaging process of several defined environments are consistent with the previous adjustments.
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"build:test": "cross-env NODE_ENV=production env_config=test node build/build.js",
"build:pre": "cross-env NODE_ENV=production env_config=pre node build/build.js",
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
},Here, it is best to set NODE_ENV to production, because only one judgment of production is made in utils.js, and personal testing will not affect the API parameters of each environment. ##Step 4: Modify config/index.js
Modify the build parameters in the config/index.js file. The parameters here will be used in build/webpackage.prod.conf.js
build:{
// Template for index.html
// 添加test pre prod 三处环境的配制
prodEnv: require('./prod.env'),
preEnv: require('./pre.env'),
testEnv: require('./test.env'),
//下面为原本的内容，不需要做任何个性
index:path.resolve(dirname,'../dist/index.html'),Step 5: Use the build environment parameters in webpackage.prod.conf.js to build/webpackage.prod.conf.js file Modify and adjust the way env constants are generated.
// 个性env常量的定义
// const env = require('../config/prod.env')
const env = config.build[process.env.env_config+'Env']Step 6: Adjust build/build.jsDelete the assignment of process.env.NODE_ENV, modify the definition of spinner, and adjust The following content is as follows:
'use strict'
require('./check-versions')()
// 注释掉的代码
// process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
// 修改spinner的定义
// const spinner = ora('building for production...')
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
spinner.start()
//更多的其它内容，不需要做任何调整的内容 ...Supplement:
vue2 webpack how to package by environmentThis year I had the opportunity to work on a vue2 single-page application project, and I went through two environments from development to launch. I run npm run build in both the test environment and the official environment. The variables of these two environments are currently different. It feels a little troublesome to change the variables every time when packaging. Later, I referred to my colleagues. In their projects, they ran different commands according to the environment and obtained different packages. For example, the test environment npm run test, the formal environment npm run build.
Need to be configured in the file config/prod.env.js
const target = process.env.npm_lifecycle_event;
if (target == 'test') {
//测试
var obj = {
NODE_ENV: '"production"',
//post用当前域名
API_ROOT: '""',
//数据字典
API_ROOT_DICT:'"http://test.gw.fdc.com.cn"',
}
}else {
//线上
var obj = {
NODE_ENV: '"production"',
//post用当前域名
API_ROOT: '""',
//数据字典
API_ROOT_DICT:'"http://gw.fdc.com.cn"',
}
}
module.exports = obj;npm provides an npm_lifecycle_event variable to return the name of the currently running script, such as pretest, test, posttest, etc. Therefore, you can use this variable to write code for different npm scripts commands in the same script file.
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:
Vuex usage case in ReactUsage of vue built-in instructionsThe above is the detailed content of Detailed explanation of Vue project packaging steps by 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
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
1376
52
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
Detailed explanation of obtaining administrator rights in Win11
Mar 08, 2024 pm 03:06 PM
Windows operating system is one of the most popular operating systems in the world, and its new version Win11 has attracted much attention. In the Win11 system, obtaining administrator rights is an important operation. Administrator rights allow users to perform more operations and settings on the system. This article will introduce in detail how to obtain administrator permissions in Win11 system and how to effectively manage permissions. In the Win11 system, administrator rights are divided into two types: local administrator and domain administrator. A local administrator has full administrative rights to the local computer
Detailed explanation of division operation in Oracle SQL
Mar 10, 2024 am 09:51 AM
Detailed explanation of division operation in OracleSQL In OracleSQL, division operation is a common and important mathematical operation, used to calculate the result of dividing two numbers. Division is often used in database queries, so understanding the division operation and its usage in OracleSQL is one of the essential skills for database developers. This article will discuss the relevant knowledge of division operations in OracleSQL in detail and provide specific code examples for readers' reference. 1. Division operation in OracleSQL
Detailed explanation of the role and usage of PHP modulo operator
Mar 19, 2024 pm 04:33 PM
The modulo operator (%) in PHP is used to obtain the remainder of the division of two numbers. In this article, we will discuss the role and usage of the modulo operator in detail, and provide specific code examples to help readers better understand. 1. The role of the modulo operator In mathematics, when we divide an integer by another integer, we get a quotient and a remainder. For example, when we divide 10 by 3, the quotient is 3 and the remainder is 1. The modulo operator is used to obtain this remainder. 2. Usage of the modulo operator In PHP, use the % symbol to represent the modulus
Detailed explanation of the linux system call system() function
Feb 22, 2024 pm 08:21 PM
Detailed explanation of Linux system call system() function System call is a very important part of the Linux operating system. It provides a way to interact with the system kernel. Among them, the system() function is one of the commonly used system call functions. This article will introduce the use of the system() function in detail and provide corresponding code examples. Basic Concepts of System Calls System calls are a way for user programs to interact with the operating system kernel. User programs request the operating system by calling system call functions
Detailed explanation of VSCode functions: How does it help you improve work efficiency?
Mar 25, 2024 pm 05:27 PM
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
Detailed explanation of Linux curl command
Feb 21, 2024 pm 10:33 PM
Detailed explanation of Linux's curl command Summary: curl is a powerful command line tool used for data communication with the server. This article will introduce the basic usage of the curl command and provide actual code examples to help readers better understand and apply the command. 1. What is curl? curl is a command line tool used to send and receive various network requests. It supports multiple protocols, such as HTTP, FTP, TELNET, etc., and provides rich functions, such as file upload, file download, data transmission, proxy
Transform Python code into an independent application: the alchemy of PyInstaller
Feb 19, 2024 pm 01:27 PM
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
