vue-cli2分环境本地运行和打包

因为各种原因，开发的项目复用性高，请求连接偏多，总是需要不停的切换请求地址来实现本地与线上的调试及打包，比较麻烦且容易出错，于是对项目的打包运行实行了配置，实现不同环境配置不同打包和运行命令，整理归纳。

最终实现的配置命令：
npm run build 线上环境打包
npm run test 测试环境打包
npm run dev 测试环境本地运行
npm run online 线上环境本地运行

页面相关地址调用：
const shareURL = process.env.shareURL
const baseURL = process.env.baseURL
const BASE_URL = process.env.BASE_URL
const imgUrl = process.env.imgUrl

可以根据process.env里不同参数来进行正式环境与测试环境的一些区分，例如：内嵌h5为了方便调试一般测试环境打包需要打开vconsole，但是正式环境打包是需要关掉的，所以可以做相关判断来达到测试环境显示正式环境屏蔽，如下：

import VConsole from 'vconsole'
...
// 根据需要不同环境显示相关代码
switch(process.env.NODE_ENV) {
  case 'production':
    // console不打印
    // console.log = function() {}
    ...
    break
  default:
    // 显示vconsole
    new VConsole()
    ...
    break

}

---

以下为配置相关步骤：

（一）、分环境打包

npm run test
npm run build

1、安装cross-env

npm install cross-env --save

2、config目录下新建test.env.js文件，修改prod.env.js、index.js文件

test.env.js 文件

module.exports = {
    NODE_ENV: '"test"',
    ENV_CONFIG: '"test"',
    // 测试环境请求地址
    shareURL: '"https://cs.xxxa.com/public/share"', 
    baseURL: '"https://cs.xxxb.com/index.php"',
    BASE_URL: '"https://cs.xxxc.com"',
    imgUrl: '"https://cs.xxxd.com"',
}

prod.env.js 文件

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prod"',
  // 线上环境请求地址
  shareURL: '"https://on.xxxa.com/public/share"', 
  baseURL: '"https://on.xxxb.com/index.php"',
  BASE_URL: '"https://on.xxxc.com"',
  imgUrl: '"https://on.xxxd.com"',
}

index.js 文件

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

3、build目录下修改webpack.prod.config.js与build.js

webpack.prod.config.js

// const env = require('../config/prod.env')
const env = config.build[process.env.env_config+'Env']

build.js

<!--const spinner = ora('building for production...')-->
const spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
spinner.start()

4、修改package.json

"scripts": {
    "build": "cross-env NODE_ENV=production env_config=prod node build/build.js",
    "test": "cross-env NODE_ENV=test env_config=test node build/build.js"
  },

---

（二）、分环境运行

npm run dev
npm run online

1、config目录下新建online.env.js文件，更改dev.env.js、index.js文件

dev.env.js

'use strict'
const merge = require('webpack-merge')
const testEnv = require('./test.env') // 直接引用测试环境打包链接配置

module.exports = merge(testEnv, {
  NODE_ENV: '"development"',
  ENV_CONFIG: '"dev"'
})

online.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env') //引用正式环境打包链接配置

module.exports = merge(prodEnv, {
  NODE_ENV: '"online"',
  ENV_CONFIG: '"online"'
})

index.js

dev: {
    devEnv: require('./dev.env'),
    onlineEnv: require('./online.env')
    ...
}

2、build目录下修改webpack.dev.config.js

webpack.dev.config.js

let env = config.dev[process.env.ENV_CONFIG + 'Env']
...
new webpack.DefinePlugin({
  // 'process.env': require('../config/dev.env')
  'process.env': env
})

3、修改package.json

"scripts": {
    "dev": "cross-env NODE_ENV=development env_config=dev webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",
    "online": "cross-env NODE_ENV=online env_config=online webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0"
    ...
  },