vue实现分环境打包步骤,配置编译环境和线上环境之间的切换

在项目里面，我们一般都需要配置生产环境和编译环境来请求不同的url或者做其他事情，那我们到底怎么配置尼，下面就来为大家介绍一下：
1）要确定安装了cross-env

npm install cross-env –save-dev

2）在config文件里面新建test.env.js
里面的内容是

'use strict'
module.exports = {
    NODE_ENV: '"testing"',
    EVN_CONFIG:'"test"'
}

3）config中修改prod.env.js文件

'use strict'
module.exports = {
   NODE_ENV: '"production"',
   ENV_CONFIG:'"prod"'
}

**记住NODE_ENV这里是需要添加双引号的，如果去掉了就会报错哦
4）config中的index.js 文件中build部分代码修改如下：

  build: {
    prodEnv: require('./prod.env'),//添加这行
    testEnv: require('./test.env'),//添加这行
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    //以下省略........
}

5）在build中webpack.prod.conf.js做如下修改：
将

const env = require('../config/prod.env')

修改为:

const env = config.build[process.env.env_config+'Env']

6）将build里面的build.js部分做修改：

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

// 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...')//原始内容，注释掉
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )//添加这行

7)修改package.json文件（在script里面添加）：

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

8）在src文件夹中新建common文件夹，在common里面新建env.js，里面的内容如下：

/*
 * 配置编译环境和线上环境之间的切换
 * 以及静态变量
 * baseUrl: 域名地址
 * routerMode: 路由模式
 */
let baseUrl = '';
let routerMode = 'history';
let DEBUG = false;
let cancleHTTP = [];//取消请求头设置；
if (process.env.NODE_ENV == 'development') { //生产环境走的地址
    baseUrl = "协议名://域名:端口号";
    DEBUG = true;
}else if(process.env.NODE_ENV == 'production'){  //测试环境地址
    baseUrl = "协议名://域名:端口号";   //测试地址
    DEBUG = false;
}else if(process.env.NODE_ENV == 'testing'){  //测试环境地址
    baseUrl = "协议名://域名:端口号";   //测试地址
    DEBUG = false;
}

export default{
    baseUrl,
    routerMode,
    DEBUG,
    cancleHTTP
}

这样baseurl就可以根据环境来变化了，只要在js文件或者在组件里面引用env.js里面就可以了；
9）想要test环境下则运行：

npm run build--test

10）想要prod环境下则运行：

npm run build--prod