Vue2 + Webpack 3 configuration with different domain names after packaging in different environments

Project requirements

The online address of the official version of the production environment is: www.xxxx.com

The online address of the production environment test version is: www.test.com

Local development environment environment: localhost: 8080

The company uses the Jenkins automated packaging and deployment system. In the actual development or / production environment, we need to configure the packaged files to different domain names. What I did at the beginning was to modify this address before packaging each time in main.js.

 

The project directory structure is as follows

The main changes are in build / config in two folders

Create a new test.env.js file under config. This file sets the quotation marks for the name of the test environment!

'use strict'
module.exports = {
   NODE_ENV: '"testing"',
   ENV_CONFIG:'"test"'
}

Modify the prod.env.js file This file sets the name of the production environment

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prod"'
}

Modify webpack.prod.config.js in the build folder 

// const env = require('../config/prod.env') //这是原来的代码 注释掉 下一行是新加的代码
const env = config.build[process.env.env_config+'Env']

Modify the index.js build object code in the config folder, here is the introduction of different environment names

build: {
    prodEnv: require('./prod.env'),
    testEnv: require('./test.env'),
    ..........
        }

The point is here, the above is to write some simple code, the real deal is still a big guy to package into a library for us to use directly. Install cross-env script cross-env

npm install -D cross-env

Learn about this library

 

Modify build.js in the build folder, which is the main configuration entry when running the package. The modified code means that when packaging, it prompts to output which environment is currently packaged.

'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')


// const spinner = ora('building for production...') 这个地方注释掉 下两行spinner代码加上
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
spinner.start()

OK basic settings have been configured, the following began to configure the npm packaging command in different environments 

The package.json file scripts object is mainly build--test / build--prod These two dev local development environments we have not made any changes

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js",
    "build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js",
    "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
  },

Next, configure the switch between the compilation environment and the online environment, including the packaged domain name

Create a new config or other name such as common under src, and create a new env.js to output baseUrl. Note that in {}, I only output a basic domain name here. Other common parameters required for different configurations according to the packaging environment can also Configure here and output.

/*
 * 配置编译环境和线上环境之间的切换
 * baseUrl: 域名地址
 */
let baseUrl = '';
if (process.env.NODE_ENV == 'development') {
// 本地开发
  baseUrl = "http://localhost:8080";
} else if (process.env.NODE_ENV == 'production') {
//正式
  baseUrl = "http://www.xxx.com";
} else if (process.env.NODE_ENV == 'testing') {
//测试
  baseUrl = "http://www.test.com";
}
export {
  baseUrl
}

Finally, main.js introduces this address,

import {
  baseUrl
} from "@/config/env";

import myAxios from "@/utils/plugins/http"
var $vm = new Vue({
  el: "#app"
})

console.log("===========baseUrl===========", baseUrl)

test 

npm run build--prod We first modified the ora, the spinner is the second red box

Oh