vue實(shí)現(xiàn)分環(huán)境打包步驟,配置編譯環(huán)境和線上環(huán)境之間的切換

在項(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
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市俯树,隨后出現(xiàn)的幾起案子帘腹,更是在濱河造成了極大的恐慌,老刑警劉巖许饿,帶你破解...
    沈念sama閱讀 211,743評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件阳欲,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)球化,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門秽晚,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人赊窥,你說我怎么就攤上這事爆惧±暌常” “怎么了锨能?”我有些...
    開封第一講書人閱讀 157,285評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)芍耘。 經(jīng)常有香客問我址遇,道長(zhǎng),這世上最難降的妖魔是什么斋竞? 我笑而不...
    開封第一講書人閱讀 56,485評(píng)論 1 283
  • 正文 為了忘掉前任倔约,我火速辦了婚禮,結(jié)果婚禮上坝初,老公的妹妹穿的比我還像新娘浸剩。我一直安慰自己,他們只是感情好鳄袍,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,581評(píng)論 6 386
  • 文/花漫 我一把揭開白布绢要。 她就那樣靜靜地躺著,像睡著了一般拗小。 火紅的嫁衣襯著肌膚如雪重罪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,821評(píng)論 1 290
  • 那天哀九,我揣著相機(jī)與錄音剿配,去河邊找鬼。 笑死阅束,一個(gè)胖子當(dāng)著我的面吹牛呼胚,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播息裸,決...
    沈念sama閱讀 38,960評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼蝇更,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了界牡?” 一聲冷哼從身側(cè)響起簿寂,我...
    開封第一講書人閱讀 37,719評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎宿亡,沒想到半個(gè)月后常遂,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,186評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡挽荠,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,516評(píng)論 2 327
  • 正文 我和宋清朗相戀三年克胳,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了平绩。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,650評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡漠另,死狀恐怖捏雌,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情笆搓,我是刑警寧澤性湿,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布,位于F島的核電站满败,受9級(jí)特大地震影響肤频,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜算墨,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,936評(píng)論 3 313
  • 文/蒙蒙 一宵荒、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧净嘀,春花似錦报咳、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至熬苍,卻和暖如春稍走,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背柴底。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評(píng)論 1 266
  • 我被黑心中介騙來泰國(guó)打工婿脸, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人柄驻。 一個(gè)月前我還...
    沈念sama閱讀 46,370評(píng)論 2 360
  • 正文 我出身青樓狐树,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親鸿脓。 傳聞我的和親對(duì)象是個(gè)殘疾皇子抑钟,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,527評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)野哭,斷路器在塔,智...
    卡卡羅2017閱讀 134,633評(píng)論 18 139
  • 版權(quán)聲明:本文為博主原創(chuàng)文章,未經(jīng)博主允許不得轉(zhuǎn)載贺待。 webpack介紹和使用 一徽曲、webpack介紹 1、由來 ...
    it筱竹閱讀 11,059評(píng)論 0 21
  • 1 Webpack 1.1 概念簡(jiǎn)介 1.1.1 WebPack是什么 1麸塞、一個(gè)打包工具 2秃臣、一個(gè)模塊加載工具 3...
    Kevin_Junbaozi閱讀 6,645評(píng)論 0 16
  • 原文http://www.cnblogs.com/libin-1/p/6596810.html 版本號(hào) vue-c...
    tengrl閱讀 3,638評(píng)論 0 0
  • 自殺者絕非悲觀奥此,更非消極,只有悲觀主義者反對(duì)自殺正勒。 悲觀者喜歡從壞的一方面來觀察事物得院,何事面面俱到,...
    孑逸閱讀 1,245評(píng)論 0 3