vue cli3 實(shí)現(xiàn)分環(huán)境打包的步驟
用cli3搭建的vue項(xiàng)目號(hào)稱(chēng)零配置文件，為了方便打包（不用手動(dòng)來(lái)回改不同環(huán)境進(jìn)行打包）那么我們?cè)谛枰虬臅r(shí)候分不同環(huán)境打包怎么辦呢
1.在根目錄下創(chuàng)建三個(gè)配置文件，如下圖
這里我創(chuàng)建了三個(gè)，這三個(gè)分別是我的 本地；離線；線上環(huán)境 ，三個(gè)文件的內(nèi)容依次為下VUE_APP_TITLE要對(duì)應(yīng)當(dāng)前文件后綴，build 對(duì)應(yīng)的production
NODE_ENV = 'production' VUE_APP_TITLE = 'alpha' ==================================================================== NODE_ENV = 'production' VUE_APP_TITLE = 'production' ==================================================================== NODE_ENV = 'production' VUE_APP_TITLE = 'online'
2.package.json配置對(duì)應(yīng)環(huán)境打包名稱(chēng)，如圖所示：
3.如圖所示
4.在接口攔截文件，如圖所示：
5.配置完以后三個(gè)環(huán)境打打包方式分別如下：
app打包離線環(huán)境：npm run alpha
app打包本地環(huán)境：npm run build
app打包正式環(huán)境：npm run online
到此這篇關(guān)于vue cli3 實(shí)現(xiàn)分環(huán)境打包的步驟的文章就介紹到這了,更多相關(guān)vue cli3 分環(huán)境打包內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
基于Vue3和Element Plus實(shí)現(xiàn)可擴(kuò)展的表格組件
在開(kāi)發(fā)過(guò)程中,我們經(jīng)常需要?jiǎng)?chuàng)建具有復(fù)雜功能的表格組件,本文將介紹如何使用 Vue 3 和 Element Plus 庫(kù)來(lái)構(gòu)建一個(gè)可擴(kuò)展的表格組件,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-07-07
vue+Element實(shí)現(xiàn)搜索關(guān)鍵字高亮功能
這篇文章主要為大家詳細(xì)介紹了vue+Element實(shí)現(xiàn)搜索關(guān)鍵字高亮功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
用vuex寫(xiě)了一個(gè)購(gòu)物車(chē)H5頁(yè)面的示例代碼
本篇文章主要介紹了用vuex寫(xiě)了一個(gè)購(gòu)物車(chē)H5頁(yè)面的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
本文是作者通過(guò)實(shí)際項(xiàng)目的優(yōu)化實(shí)踐進(jìn)行總結(jié)而來(lái)，希望讀者讀完本文，有一定的啟發(fā)思考，從而對(duì)自己的項(xiàng)目進(jìn)行優(yōu)化起到幫助2022-08-08
Vue命令式組件的編寫(xiě)與應(yīng)用小結(jié)
這篇文章主要介紹了Vue命令式組件的編寫(xiě)與應(yīng)用小結(jié),在這篇文章中,我會(huì)帶你了解命令式組件的基本概念,并通過(guò)一些簡(jiǎn)單的示例來(lái)展示它們是如何工作的,需要的朋友可以參考下2024-03-03
本文給大家分享vue自定義組件的四種方式，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-02-02
vue-router中hash模式與history模式的區(qū)別
為了構(gòu)建 SPA（單頁(yè)面應(yīng)用）,需要引入前端路由系統(tǒng),這就是 Vue-Router 存在的意義,而這篇文章主要給大家介紹了關(guān)于vue-router中兩種模式區(qū)別的相關(guān)資料，分別是hash模式、history模式,需要的朋友可以參考下2021-06-06
Vue重要修飾符.sync對(duì)比v-model的區(qū)別及使用詳解
這篇文章主要為大家介紹了Vue中重要修飾符.sync與v-model的區(qū)別對(duì)比及使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
詳解vue 模擬后臺(tái)數(shù)據(jù)（加載本地json文件）調(diào)試
本篇文章主要介紹了詳解vue 模擬后臺(tái)數(shù)據(jù)（加載本地json文件）調(diào)試，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
vite多頁(yè)面配置項(xiàng)目實(shí)戰(zhàn)
vite官方文檔中有關(guān)于多頁(yè)面應(yīng)用模式如果配置的說(shuō)明,下面這篇文章主要給大家介紹了關(guān)于vite多頁(yè)面配置的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04