vue項(xiàng)目打包之開(kāi)發(fā)環(huán)境和部署環(huán)境的實(shí)現(xiàn)
項(xiàng)目開(kāi)發(fā)階段和生產(chǎn)環(huán)境可能不一樣
如前端在開(kāi)發(fā)階段，接口可能是自己使用 node.js 搭建的服務(wù)器，API 返回的也都是假數(shù)據(jù)，等后臺(tái)接口開(kāi)發(fā)好后，再切換成后臺(tái)提供的接口，等測(cè)試沒(méi)有問(wèn)題，服務(wù)端上線后，又要改成正式的接口
手動(dòng)改動(dòng)接口，既繁瑣又容易出錯(cuò)（當(dāng)然，區(qū)別還不止這些）
優(yōu)雅的解決方案是，分別使用兩個(gè)入口文件，一個(gè)用于開(kāi)發(fā)環(huán)境打包，一個(gè)用于生產(chǎn)環(huán)境打包
具體來(lái)說(shuō)，分為下面幾個(gè)步驟
1、創(chuàng)建入口文件
在 src 目錄下新建 prod_env.js 和 dev.env.js
將main.js 中代碼分別拷貝到這兩個(gè)文件中，并刪除 main.js
2、配置打包時(shí)的入口文件
項(xiàng)目根目錄下新建 vue.config.js
編寫如下代碼
module.exports={
chainWebpack:config=>{
config.when(process.env.NODE_ENV === 'production',config=>{
config.entry('app').clear().add('./src/prod_env.js')
})
config.when(process.env.NODE_ENV === 'development',config=>{
config.entry('app').clear().add('./src/dev_env.js')
})
}
}
說(shuō)明
開(kāi)發(fā)時(shí)，使用 npm run serve 命令，NODE_ENV 的值就是 developmnent ，所以會(huì)將 dev.env.js 作為入口文件
部署時(shí)，使用 npm run build 命令，NODE_ENV 的值就是 production，所以會(huì)將 prod_evn.js 作為入口文件
3、測(cè)試
故意在兩個(gè)入口文件中搞點(diǎn)錯(cuò)誤，如注釋1行下面需要用到的代碼，然后運(yùn)行打包命令，就可以看到錯(cuò)誤信息
相關(guān)文章
詳解vue 配合vue-resource調(diào)用接口獲取數(shù)據(jù)
本篇文章主要介紹了vue 配合vue-resource調(diào)用接口獲取數(shù)據(jù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Vue 子組件與數(shù)據(jù)傳遞問(wèn)題及注意事項(xiàng)
這篇文章主要介紹了Vue子組件與數(shù)據(jù)傳遞問(wèn)題及需要注意事項(xiàng)，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了Vue首頁(yè)加載白屏原因以及10種解決方法匯總，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue CLI3移動(dòng)端適配(px2rem或postcss-plugin-px2rem)
這篇文章主要介紹了Vue CLI3移動(dòng)端適配(px2rem或postcss-plugin-px2rem),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了Vue指令之v-for的使用說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
關(guān)于vue狀態(tài)過(guò)渡transition不起作用的原因解決
這篇文章主要介紹了關(guān)于vue狀態(tài)過(guò)渡transition不起作用的原因解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
結(jié)合康熙選秀講解vue虛擬列表實(shí)現(xiàn)
這篇文章主要為大家介紹了結(jié)合康熙選秀講解vue虛擬列表的原理使用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了vue 父組件調(diào)用子組件方法及事件的相關(guān)資料，父組件傳入數(shù)組子組件循環(huán)來(lái)創(chuàng)建不同的組件模塊,所有事件都在子組件內(nèi)部.怎么實(shí)現(xiàn)這樣一個(gè)功能呢？接下來(lái)跟隨腳本之家小編一起看看吧2018-03-03
vue中關(guān)于router.beforeEach()的用法
這篇文章主要介紹了vue中關(guān)于router.beforeEach()的用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
VuePress 可以讓您非常方便的在 Markdown 文檔中編寫 Vue 代碼，這篇文章主要介紹了VuePress 快速踩坑小結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02