最近要把Vue項(xiàng)目部署到服務(wù)器上，在測(cè)試好的項(xiàng)目中執(zhí)行npm run build就開(kāi)始打包了磅网。但是每次只能打包到一個(gè)環(huán)境，不同環(huán)境需要配置不同的地址傻盟，還得手動(dòng)更改接口的地址，這給部署帶來(lái)了極大的不方便规哲。
下面诽表，我們要自己配置命令來(lái)實(shí)現(xiàn)分環(huán)境打包，項(xiàng)目結(jié)構(gòu)如下：
image.png
1.在config目錄內(nèi)新建test.env.js文件(要保證和prod.env.js一致)：
'use strict'
module.exports = {
NODE_ENV: '"testing"',
ENV_CONFIG:'"test"'
}
2.修改config內(nèi)的prod.env.js文件：
'use strict'
module.exports = {
NODE_ENV: '"production"',
ENV_CONFIG:'"prod"'
}
3.在build目錄下修改webpack.prod.conf.js：
// const env = require('../config/prod.env') 注釋這一行
//添加下面幾行
if(process.env.NODE_ENV === 'testing') {
var env = require('../config/test.env')
console.log("test")
}else{
var env = require('../config/prod.env')
console.log("prod")
}
4.確認(rèn)安裝cross-env
cnpm install cross-env --save-dev
5.修改package.json文件（在script里面添加）：
{
"name": "vue",
"version": "1.0.0",
"description": "vue project",
"author": "David <853020304@qq.com>",
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"build": "node build/build.js",
"build:report": "npm_config_report=true node build/build.js",
"lint": "eslint --ext .js,.vue src",
"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"
}
6.在放置公共文件的目錄下下新建env.js，對(duì)環(huán)境進(jìn)行判斷并切換绿语，內(nèi)容如下：
/*
* 配置編譯環(huán)境和線(xiàn)上環(huán)境之間的切換
* baseUrl: 域名地址
* routerMode: 路由模式
* DEBUG: debug狀態(tài)
* cancleHTTP: 取消請(qǐng)求頭設(shè)置
*/
const baseUrl = '';
const routerMode = 'history';
const DEBUG = false;
const cancleHTTP = [];
if (process.env.NODE_ENV == 'development') {
baseUrl = "http://61.incfotech.com/test";
DEBUG = true;
}else if(process.env.NODE_ENV == 'testing'){
baseUrl = "http://61.incfotech.com/test";
DEBUG = false;
}else if(process.env.NODE_ENV == 'production'){
baseUrl = "http://www.incfotech.com/hotel";
DEBUG = false;
}
export{
baseUrl,
routerMode,
DEBUG,
cancleHTTP
}
7.在axios請(qǐng)求接口的文件內(nèi)引入env.js
import axios from 'axios'
import {Message} from 'element-ui'
import store from '../store'
import {getToken, removeToken} from '@/utils/auth'
import {loginUrl} from '@/config/common'
import {baseUrl} from '@/config/env'
// 創(chuàng)建axios實(shí)例
const service = axios.create({
// baseURL: process.env.BASE_API, // api的base_url
baseURL: baseUrl, // api的base_url
timeout: 50000, // 請(qǐng)求超時(shí)時(shí)間
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/json'
}
})
8.配置成功吕粹，運(yùn)行命令如下：
測(cè)試環(huán)境打包岗仑，運(yùn)行：cnpm run build--test
生產(chǎn)環(huán)境打包，運(yùn)行：cnpm run build--prod
