vue-cli 根据不同的环境打包

vue-cli 中build中build.js部分代码做如下修改

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 = require('../config/prod.env');
const env = config.build[process.env.env_config+'Env']

config中的index.js 部分代码修改如下

module.exports = {
    build: {
        prodEnv: require('./prod.env'),
        testEnv: require('./test.env'),
        ppeEnv: require('./ppe.env'),
        index: path.resolve(__dirname, '../dist/' + new Date().getTime() + '/index.html'),
        。。。。。

config中的index.js 配置代理跨域

// 配置代理跨域
    proxyTable: {
      '/api': {
        target: 'http://xxxxxxxxxxxx/', // 开发接口域名
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {
          '^/api': ''
        }
      }
    },

在config中新建test.env.js

//测试环境
module.exports = {
  NODE_ENV: '"testEnvironment"',
  ENV_CONFIG: '"test"',
。。。
}

在config中新建ppe.env.js

//预生产
module.exports = {
  NODE_ENV: '"ppeEnvironment"',
  ENV_CONFIG: '"ppe"',
hosturl: '"https://ppexxx"'
。。。
}

安装cross-env npm i cross-env -S

接口调用 src文件夹中新建api文件；文件夹中新建api.js和baseURL.js

//--------------baseURL.js----------------
let baseURL = '/api';

// 判断开发环境 设置不同的请求域名
if(process.env.NODE_ENV === 'development') {
  baseURL = '/api'; // 开发环境使用代理域名
} else if (process.env.NODE_ENV === 'testEnvironment') {
  baseURL = 'http://xxxxxxxxxxxx'; // 测试环境
} else if (process.env.NODE_ENV === 'ppeEnvironment') {
  baseURL = 'http://ppe'; // 演练环境
} else {
  baseURL = ''; // 生产环境
}
export default baseURL


//--------------api.js----------------
import axios from 'axios';
import baseURL from './baseURL.js'

// 创建axios实例
const Request = axios.create({
  baseURL: baseURL,
})
// 初始化默认post header
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 接口调用
export const queryAllRecord = params => {
  return Request.post(`app/xxx/xxxxxx`,params).then(res => res.data);
};

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=testEnvironment env_config=test node build/build.js",
    "build:ppe": "cross-env NODE_ENV=ppeEnvironment env_config=ppe node build/build.js",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
  },

输入指令

• npm run dev 开发环境
• npm run build:test 打包测试环境
• npm run build:ppe 打包演练环境
• npm run build 打包生产环境