vue搭配cross-env配置多环境打包

一个项目中，有测试，正式，本地，如果不配置下打包环境的话，每次npm run build的时候都要切换下请求的地址，这就不太符合我们的工作习惯，所以还是一开始配置下，后面就不用这么麻烦。

1.cross-env这个插件主要是解决跨平台命令的不一致

npm install cross-env –save-dev

2.在config文件中新建test.env.js并修改prod.env.js文件

//新建test.env.js
'use strict'
module.exports = {
  NODE_ENV: '"test"',
  ENV_CONFIG: '"test"'
}

//修改prod.env.js
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prod"'
}

3.修改 config文件夹中的index.js，导入新加的环境配置

build: {
    testEnv: require('./test.env'),  //新添加的
    prodEnv: require('./prod.env'), //新添加的

    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

4.配置build文件夹中的动态打包配置，替换之前的production生产环境的打包

（1）修改webpack.prod.conf.js中的打包配置

// const env = require('../config/prod.env') //原来的

const env = config.build[process.env.env_config + 'Env'] //替换后的

（2）修改build文件下的build.js

// 未修改之前的

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.start()



// 修改后的

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 ' + process.env.NODE_ENV + ' of ' + process.env.env_config + ' mode...')
spinner.start()

5.配置我们的package.json

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build:test": "cross-env NODE_ENV=production env_config=test node build/build.js",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
  },

6.在封装请求页面的地方，动态判断请求地址

let headersUrl = ''
if (process.env.NODE_ENV === 'test') {//测试
  headersUrl = ''
} else if (process.env.NODE_ENV === 'prod') {//正式
  headersUrl = ''
}