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