In project development, our projects are generally divided into development version, beta version, pre version, and prod version. Vue-cli has only two default environments: dev and prod. Every time I wanted to release a beta version or a pre version, I modified the API address in the source code and packaged it, which is very troublesome. It would be perfect if it could be packaged according to different environments. I have collected a lot of information online, and now I can package the program in different environments. As for how to do it, let’s continue to check it out.
Step 1: Install cross-env
Run the following command in the project directory to install cross-env. My idea is webstorm. It needs to run directly in the Terminal window in the idea. It may also be located in the project root directory through the CMD of Windows and the Terminal of Linux to run the following commands.
npm i --save-dev cross-env
Step 2: Modify the parameters in each environment
Add in the config/ directory. The modified content is as follows:
'use strict'
= {
NODE_ENV: '"production"',
EVN_CONFIG:'"prod"',
API_ROOT:'"/apis/v1"'
}
The contents of the document are further studied and modified. The modified contents are as follows:
'use strict'
= {
NODE_ENV: '"testing"',
EVN_CONFIG:'"test"',
API_ROOT:'"/test/apis/train"'
}
'use strict'
= {
NODE_ENV: '"presentation"',
EVN_CONFIG:'"pre"',
API_ROOT:'"/pre/apis/train"'
}
Modify the file contents, and the modified contents are as follows. The dev environment has configured a service proxy, and the API before API_ROOT is the configured proxy address.
= merge(prodEnv, {
NODE_ENV: '"development"',
VN_CONFIG: '"dev"',
API_ROOT: '"api/apis/v1"'
})
Step 3: Modify the project file
Personalize the scripts content in the file, add several newly defined environment packaging processes, and the parameters in it are consistent with the previous coordination.
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/",
"start": "npm run dev",
"build": "node build/",
"build:test": "cross-env NODE_ENV=production env_config=test node build/",
"build:pre": "cross-env NODE_ENV=production env_config=pre node build/",
"build:prod": "cross-env NODE_ENV=production env_config=prod node build/"
},
Here, it is best to set NODE_ENV as production, because only one determination of production is made, and personal testing will not affect the API parameters of each environment. ##Step 4: Modify config/
Modify the build parameters in the config/ file, and the parameters here will be used in the build/
build:{
// Template for
// Add test pre prod to prepare three environments prodEnv: require('./'),
preEnv: require('./'),
testEnv: require('./'),
//The following is the original content, no need to have any personality index:(__dirname,'../dist/'),
Step 5: Use the build environment parameters in
Modify the build/file and adjust the generation method of env constants.
// Definition of personalized env constants// const env = require('../config/')
const env = [.env_config+'Env']
Step 6: Adjust build/
Delete the assignment of .NODE_ENV, modify the definition of spinner, and the adjusted content is as follows:
'use strict'
require('./check-versions')()
// Commented out code// .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('./')
// Modify the definition of spinner// const spinner = ora('building for production...')
var spinner = ora('building for ' + .NODE_ENV + ' of ' + .env_config+ ' mode...' )
()
//More content，No adjustments are required ...
Replenish:
How to package vue2+webpack in different environments
This year I had the opportunity to do a single-page application project for vue2, and went through two environments from development to online. I run npm run build for the test environment and the formal environment. The variables of these two environments are currently different. You have to change the volume every time you pack it, which feels a little troublesome. Later, I referred to my colleagues, and they ran different commands in their projects and got different packages. For example, test environment npm run test , formal environment npm run build .
Need to configure in file config/config
const target = .npm_lifecycle_event;
if (target == 'test') {
//testvar obj = {
NODE_ENV: '"production"',
//Post uses the current domain nameAPI_ROOT: '""',
//Data DictionaryAPI_ROOT_DICT:'""',
}
}else {
//on-linevar obj = {
NODE_ENV: '"production"',
//Post uses the current domain nameAPI_ROOT: '""',
//Data DictionaryAPI_ROOT_DICT:'""',
}
}
= obj;
npm provides an npm_lifecycle_event variable, returning the currently running script name, 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.
Summarize
The above is the implementation code for Vue project environment packaged by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!