vue cli3 實(shí)現(xiàn)分環(huán)境打包的步驟
用cli3搭建的vue項(xiàng)目號稱零配置文件，為了方便打包（不用手動(dòng)來回改不同環(huán)境進(jìn)行打包）那么我們在需要打包的時(shí)候分不同環(huán)境打包怎么辦呢
1.在根目錄下創(chuàng)建三個(gè)配置文件，如下圖
這里我創(chuàng)建了三個(gè)，這三個(gè)分別是我的 本地；離線；線上環(huán)境 ，三個(gè)文件的內(nèi)容依次為下VUE_APP_TITLE要對應(yīng)當(dāng)前文件后綴，build 對應(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配置對應(yīng)環(huán)境打包名稱，如圖所示：
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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在Vue3中創(chuàng)建和使用自定義指令的實(shí)現(xiàn)方式
在現(xiàn)代前端開發(fā)中,Vue.js 是一個(gè)非常流行的框架,它提供了許多強(qiáng)大的功能來幫助開發(fā)者構(gòu)建高效的用戶界面,自定義指令是 Vue.js 的一個(gè)重要特性,它允許開發(fā)者擴(kuò)展 HTML 元素的功能,本文將詳細(xì)介紹如何在 Vue3 中創(chuàng)建和使用自定義指令,并提供示例代碼來幫助理解2024-12-12
這篇文章主要介紹了vue?點(diǎn)擊刪除常用方式小結(jié)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue項(xiàng)目中Api的組織和返回?cái)?shù)據(jù)處理的操作
這篇文章主要介紹了Vue項(xiàng)目中Api的組織和返回?cái)?shù)據(jù)處理的操作，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
vue+vue-fullpage實(shí)現(xiàn)整屏滾動(dòng)頁面的示例代碼(直播平臺(tái)源碼)
這篇文章主要介紹了vue+vue-fullpage實(shí)現(xiàn)整屏滾動(dòng)頁面,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
本篇文章主要介紹了vue-loader教程介紹，vue-loader就是告訴webpack如何將vue格式的文件轉(zhuǎn)換成js。有興趣的可以了解一下2017-06-06
詳解vue 動(dòng)態(tài)加載并注冊組件且通過 render動(dòng)態(tài)創(chuàng)建該組件
這篇文章主要介紹了vue 動(dòng)態(tài)加載并注冊組件且通過 render動(dòng)態(tài)創(chuàng)建該組件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
vue-cli 打包使用history模式的后端配置實(shí)例
今天小編就為大家分享一篇vue-cli 打包使用history模式的后端配置實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3組件的v-model:value與v-model的區(qū)別解析
在Vue3中,v-model和v-model:value都是用于實(shí)現(xiàn)雙向數(shù)據(jù)綁定的語法糖,但v-model:value提供了更顯式和靈活的綁定方式,允許你明確指定綁定的屬性名和事件名,它們的主要區(qū)別在于默認(rèn)行為、靈活性、多模型綁定和使用場景,感興趣的朋友一起看看吧2025-02-02
webpack 3 + Vue2 使用dotenv配置多環(huán)境的步驟
這篇文章主要介紹了webpack 3 + Vue2 使用dotenv配置多環(huán)境,env文件在配置文件都可以用, vue頁面用的時(shí)候需要在 webpack.base.conf.js 重新配置,需要的朋友可以參考下2023-11-11
vue通過過濾器實(shí)現(xiàn)數(shù)據(jù)格式化
這篇文章主要介紹了vue通過過濾器實(shí)現(xiàn)數(shù)據(jù)格式化的方法，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07