Vue 項目分環(huán)境打包的方法示例

更新時間：2018年08月03日 08:31:42 作者：碼路芽子

這篇文章主要介紹了Vue 項目分環(huán)境打包的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

我們開發(fā)項目的時候，用vue-cli 2.x版本新建的項目，只有dev, pro兩種開發(fā)環(huán)境, 有時需要個test環(huán)境來給測試使用，所以找了很多方法，總結(jié)了個最簡單的方法來給大家使用

1、package.json

在build下面添加一個test運(yùn)行命令

"test": "node build/build.js"

2、prod.env.js

在config -> prod.env.js 中修改代碼

 'use strict'
 // 讀取系統(tǒng)運(yùn)行時候的變量
 const target = process.env.npm_lifecycle_event;
 // 控制臺日志輸出
 console.log('env is deploying, current env is', target)
 // 判斷環(huán)境變量，是test，還是build
 if (target == 'test') {
  var obj = {
   NODE_ENV: '"production"',
   API_ROOT: '"此處替換為測試環(huán)境地址"',
  }
 } else {
  var obj = {
   NODE_ENV: '"production"',
   API_ROOT: '"此處替換為測試環(huán)境地址"',
  }
 }
  
 module.exports = obj;

3.測試環(huán)境：

$ npm run test

正式環(huán)境:

```
$ npm run build
```

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

您可能感興趣的文章:

相關(guān)文章

vue-cli2 構(gòu)建速度優(yōu)化的實現(xiàn)方法
這篇文章主要介紹了vue-cli2 構(gòu)建速度優(yōu)化的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
Vue?element樹形控件添加虛線詳解
這篇文章主要為大家介紹了Vue?element樹形控件添加虛線，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>
2021-11-11
Vue.js 3.x 中的響應(yīng)式數(shù)據(jù)ref 與 reactive詳解
ref 和 reactive 是 Vue.js 3 中用于創(chuàng)建響應(yīng)式數(shù)據(jù)的兩個關(guān)鍵函數(shù),它們分別適用于不同類型的數(shù)據(jù),幫助我們更好地組織和管理組件的狀態(tài),這篇文章主要介紹了Vue.js 3.x 中的響應(yīng)式數(shù)據(jù)：ref 與 reactive,需要的朋友可以參考下
2024-01-01
vue通知提醒消息舉例詳解
在項目開發(fā)過程中,可能需要實現(xiàn)以下場景,未讀消息提示、報警信息、消息通知等,下面這篇文章主要給大家介紹了關(guān)于vue通知提醒消息的相關(guān)資料,需要的朋友可以參考下
2023-03-03
深入了解Vue中Vuex的用法
Vuex的官方解釋是一個專為vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式，這篇文章主要為大家介紹了Vuex的具體用法，希望對大家深入了解Vuex有一定的幫助
2023-06-06
Vue2仿淘寶實現(xiàn)省市區(qū)三級聯(lián)動
這篇文章主要為大家詳細(xì)介紹了Vue2仿淘寶實現(xiàn)省市區(qū)三級聯(lián)動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-11-11
vue中為何方法要寫在methods的里面
這篇文章主要介紹了vue中為何方法要寫在methods的里面，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue中iframe?結(jié)合?window.postMessage?實現(xiàn)跨域通信
window.postMessage()?方法可以安全地實現(xiàn)跨源通信，在一個項目的頁面中嵌入另一個項目的頁面，需要實現(xiàn)父子，子父頁面的通信，對Vue中iframe?結(jié)合?window.postMessage?實現(xiàn)跨域通信相關(guān)知識感興趣的朋友跟隨小編一起看看吧
2022-12-12
vue3 響應(yīng)式對象如何實現(xiàn)方法的不同點
這篇文章主要介紹了vue3 響應(yīng)式對象如何實現(xiàn)方法的不同點，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05
vue el-select綁定對象時,回顯內(nèi)容不正確,始終是最后一項的解決
這篇文章主要介紹了vue el-select綁定對象時,回顯內(nèi)容不正確,始終是最后一項的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07