vue-cli is packaged according to different environments

According to the needs of the project, package it into different environments through npm run build in vue-cli, such as test environment, pre-release environment, online environment, and make interface calls according to process.env

build.js in build in vue-cli

require('./check-versions')()

// process.env.NODE_ENV = 'production'

var ora = require('ora')
var rm = require('rimraf')
var path = require('path')
var chalk = require('chalk')
var webpack = require('webpack')
var config = require('../config')
var webpackConfig = require('./webpack.prod.conf')

var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
spinner.start()
// var spinner = ora('building for production...')
// spinner.start()

build中webpack.prod.conf.js

const env = config.build[process.env.env_config+'Env']
// const env = process.env.NODE_ENV === 'testing'
//   ? require('../config/test.env')
//   : require('../config/prod.env')

index.js in config

module.exports = {
    build: {
        prodEnv: require( './prod.env'), // online environment 
        sitEnv: require('./sit.env'), // test environment 
        ppeEnv: require('./ppe.env'), // The pre-release environment 
        ...

The dev.env.js
development environment in config uses the test interface, which is copied through merge

var merge = require('webpack-merge')
var sitEnv = require('./sit.env')

module.exports = merge(sitEnv, {
  NODE_ENV: '"development"'
})

Create new sit.env.js and ppe.env.js in config

module.exports = {
  NODE_ENV: '"sitEnvironment"',
  ENV_CONFIG: '"sit"',
  BASE_API: '"http://*****"' // Test environment address 
}

module.exports = {
  NODE_ENV: '"ppeEnvironment"',
  ENV_CONFIG: '"ppe"',
  BASE_API: '"http://******"' // Pre-release environment address 
}

install cross-env

npm install cross-env -D

package.json

 "scripts": {
　　 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
    "build:ppe": "cross-env NODE_ENV=ppeEnvironment env_config=ppe node build/build.js",
    "build:sit": "cross-env NODE_ENV=sitEnvironment env_config=sit node build/build.js",
　　 "lint": "eslint --ext .js,.vue src","test": "npm run lint"
  },

When packing, we only need

npm run build:sit // Test environment 
npm run build:ppe // Pre-release environment 
npm run build:prod // Online environment

vue-cli is packaged according to different environments

Guess you like