vue-cli項(xiàng)目根據(jù)線上環(huán)境分別打出測試包和生產(chǎn)包

更新時(shí)間：2018年05月23日 09:30:22 作者：就這樣簡簡單單

這篇文章主要介紹了vue-cli項(xiàng)目根據(jù)線上環(huán)境打出測試包和生產(chǎn)包的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

最近用vue-cli搭建了項(xiàng)目，準(zhǔn)備上線時(shí)發(fā)現(xiàn)腳手架自帶的npm run buil只能打出請求生產(chǎn)接口的生產(chǎn)包，但是項(xiàng)目肯定要先上測試環(huán)境，怎么用命令行打出請求測試接口的測試包呢？

Step1: package.json中新增命令行腳本test命令,并指向build文件夾下的test.js。

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js",
  "test": "node build/test.js"
 },

Step2. 在build文件夾中新建test.js,內(nèi)容可以直接拷貝同目錄build.js內(nèi)容,修改一些參數(shù)。

這樣就多了一個(gè)test環(huán)境。

Step3. 在build文件夾中新建webpack.test.conf.js,內(nèi)容可以直接拷貝同目錄webpack.prod.conf.js內(nèi)容,修改一些參數(shù)。

這樣構(gòu)建時(shí)就會(huì)去config文件夾下的test.env.js尋找環(huán)境變量。

Step4.在config文件夾中新建test.env.js,內(nèi)容可以直接拷貝同目錄prod.env.js內(nèi)容,修改一些參數(shù)。

這樣在npm run test 就能打出請求測試接口的測試包了。

可以在dist-->js-->app.js中查看是否打包成功。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

代碼詳解Vuejs響應(yīng)式原理
這篇文章主要介紹了代碼詳解Vuejs響應(yīng)式原理的基礎(chǔ)知識(shí)，有興趣的朋友們參考學(xué)習(xí)下吧。
2017-12-12
基于Vue實(shí)現(xiàn)人民幣小寫轉(zhuǎn)為大寫功能
在金融類應(yīng)用中,經(jīng)常需要將金額從小寫數(shù)字轉(zhuǎn)換為大寫形式,這種轉(zhuǎn)換主要用于正式票據(jù)、合同等場合,以增加文本的專業(yè)性和可讀性,本文將詳細(xì)介紹如何在Vue.js項(xiàng)目中實(shí)現(xiàn)這一功能,并提供多個(gè)示例和詳細(xì)的代碼說明,需要的朋友可以參考下
2024-09-09
利用nginx部署vue項(xiàng)目的全過程
今天要用到服務(wù)器nginx,還需要把自己的vue的項(xiàng)目部署到服務(wù)器上去所以就寫一下記錄下來,下面這篇文章主要給大家介紹了關(guān)于利用nginx部署vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下
2022-03-03
vue之debounce屬性被移除及處理詳解
今天小編就為大家分享一篇vue之debounce屬性被移除及處理詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue中如何實(shí)現(xiàn)復(fù)制內(nèi)容到剪切板詳解
有些業(yè)務(wù)需求需要點(diǎn)擊按鈕復(fù)制鏈接,下面這篇文章主要給大家介紹了關(guān)于vue中如何實(shí)現(xiàn)復(fù)制內(nèi)容到剪切板的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-10-10
Vue中的單向數(shù)據(jù)流原則詳解
這篇文章主要介紹了Vue中的單向數(shù)據(jù)流原則,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2025-03-03
詳解vue項(xiàng)目打包步驟
這篇文章主要介紹了vue項(xiàng)目打包步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
elementui實(shí)現(xiàn)標(biāo)簽頁與菜單欄聯(lián)動(dòng)的示例代碼
多級(jí)聯(lián)動(dòng)是一種常見的交互方式,本文主要介紹了elementui實(shí)現(xiàn)標(biāo)簽頁與菜單欄聯(lián)動(dòng)的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-06-06
vuex中的state使用及說明
這篇文章主要介紹了vuex中的state使用及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
vue中多路由表頭吸頂實(shí)現(xiàn)的幾種布局方式
這篇文章主要介紹了vue項(xiàng)目多路由表頭吸頂實(shí)現(xiàn)的幾種布局方式,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-04-04