vue实现分环境打包步骤（给不同的环境配置相对应的打包命令）

说到打包肯定是 npm run build ，这是肯定没错的  但是我们涉及多环境咋办呢 ，也是手动改配置吗 这当然是阔以的 但麻烦，

下面我们通过增设命令打包到不同环境 ，我暂时先分 development(开发)、test(测试)、pre(预生产)、product（生产）
首先来看一下项目目录

一、 建立环境配置

在config 目录下 建立    pre.env.js   test.env.js 文件

//test.env.js

module.exports = {
  NODE_ENV: '"testing"', // 环境
  ENV_CONFIG: '"test"'    // 环境标识
}


// pre.env.js

module.exports = {
  NODE_ENV: '"pre"',
  ENV_CONFIG: '"pre"'
}

二、导入 config目录下的 index.js  build模块

 build: {
    prodEnv: require('./prod.env'),  // 添加（导入）环境配置
    testEnv: require('./test.env'),
    preEnv: require('./pre.env'),
    index: path.resolve(__dirname, '../dist/index.html'),

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

    productionSourceMap: true,
    devtool: '#source-map',
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  }

三、肯定配置build目录动态打包文件 而不是单纯的 prod（生产环境了）

首先 在 build/webpack.prod.conf .js下

const env = require('../config/prod.env') // 源代码

替换成

const env = config.build[process.env.env_config + 'Env'] //动态环境 env_config

其次 在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...')


// 替换之后的
// 动态代码
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...'
)

四、肯定是配置我们的 package.json 咯

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

但是，肯定在 build之前肯定得安装依赖 才会执行 npm run test 等命令

npm install cross-env –save-dev 

五、毫无疑问是环境判断 切换服务咯

在src下 任意模块下建立 常量 config.js，名字随便取，文件随便丢  话是这么说  但还是有文档需求 按章办事  统一处理数据

let FBC_Api = '' // 服务（包括上传） api IP
let uploadUrl = '' // 图片 路径拼接 IP
if (process.env.NODE_ENV === 'development') {
  FBC_Api = 'http://192.168.1.114:8180' // 本地IP
  uploadUrl = 'http://192.168.1.114:8180' // 本地 代理
} else if (process.env.NODE_ENV === 'testing') {
  // 07环境
  FBC_Api = 'http://192.168.2.70:8000/fbcadmin'
  uploadUrl = 'http://192.168.2.70:8000'
} else if (process.env.NODE_ENV === 'pre') {
  // 预开发 09
  FBC_Api = 'http://192.168.2.70:9061'
  uploadUrl = 'http://192.168.2.70:8000'
} else {
  // 生产
  FBC_Api = 'http://192.168.2.70:9061'
  uploadUrl = 'http://192.168.2.70:8000'
}

export { FBC_Api, uploadUrl }

服务怎么用自己选择咯 

六，也是最后一步 执行命令

npm run test //测试环境

npm run pre // 预生产

npm run prod // 生产