在項(xiàng)目里面，我們一般都需要配置生產(chǎn)環(huán)境和編譯環(huán)境來請(qǐng)求不同的url或者做其他事情啡专，那我們到底怎么配置尼，下面就來為大家介紹一下：
1）要確定安裝了cross-env
npm install cross-env –save-dev
2）在config文件里面新建test.env.js
里面的內(nèi)容是
'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這里是需要添加雙引號(hào)的双絮，如果去掉了就會(huì)報(bào)錯(cuò)哦
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'//原始內(nèi)容跺嗽，注釋掉
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...')//原始內(nèi)容，注釋掉
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背稼，里面的內(nèi)容如下：
/*
* 配置編譯環(huán)境和線上環(huán)境之間的切換
* 以及靜態(tài)變量
* baseUrl: 域名地址
* routerMode: 路由模式
*/
let baseUrl = '';
let routerMode = 'history';
let DEBUG = false;
let cancleHTTP = [];//取消請(qǐng)求頭設(shè)置；
if (process.env.NODE_ENV == 'development') { //生產(chǎn)環(huán)境走的地址
baseUrl = "協(xié)議名://域名:端口號(hào)";
DEBUG = true;
}else if(process.env.NODE_ENV == 'production'){ //測(cè)試環(huán)境地址
baseUrl = "協(xié)議名://域名:端口號(hào)"; //測(cè)試地址
DEBUG = false;
}else if(process.env.NODE_ENV == 'testing'){ //測(cè)試環(huán)境地址
baseUrl = "協(xié)議名://域名:端口號(hào)"; //測(cè)試地址
DEBUG = false;
}
export default{
baseUrl,
routerMode,
DEBUG,
cancleHTTP
}
這樣baseurl就可以根據(jù)環(huán)境來變化了玻蝌，只要在js文件或者在組件里面引用env.js里面就可以了蟹肘；
9）想要test環(huán)境下則運(yùn)行：
npm run build--test
10）想要prod環(huán)境下則運(yùn)行：
npm run build--prod
