vue-cli-service?build?自定義參數(shù)方式

更新時(shí)間：2023年10月30日 16:16:11 作者：ccc陳陳陳

這篇文章主要介紹了vue-cli-service?build?自定義參數(shù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue-cli-service build 自定義參數(shù)

vue-cli-service build

（1）**作用：**是打包資源文件

（2）**工具：**通過(guò)腳手架依賴的dotenv模塊實(shí)現(xiàn)參數(shù)定義和讀取

（3）**原理：**detenv作用是將環(huán)境變量從.env文件加載到process.env中，代碼就可以通過(guò)process.env.VUE_APP_XX訪問(wèn)自定義的VUE_APP_XX的值了

在vue-cli-service的packjson中切換環(huán)境

（1）在運(yùn)行時(shí)如果需要區(qū)分生產(chǎn)環(huán)境和測(cè)試環(huán)境

只需要

“scriptes”: {
“serve”: “vue-cli-service serve”, // 會(huì)將process.env.NODE_ENV設(shè)置為development
“build”: “vue-cli-service build” // 會(huì)將process.env.NODE_ENV設(shè)置為production
}

（2）在build時(shí)在dist/目錄會(huì)有用于生產(chǎn)環(huán)境的包

需要添加選項(xiàng)–mode區(qū)分測(cè)試環(huán)境和生產(chǎn)環(huán)境

“scripts”: {
“build:test”: “vue-cli-service build --mode test”, // 測(cè)試環(huán)境
“build:prod”: “vue-cli-service build --mode prod”, // 生產(chǎn)環(huán)境
},

"build:dev": "vue-cli-service build --mode dev",	// 打包開發(fā)環(huán)境
"build:test": "vue-cli-service build --mode test",	// 打包集成測(cè)試
"build:uat": "vue-cli-service build --mode uat",	// 打包驗(yàn)收測(cè)試
"build:prod": "vue-cli-service build --mode prod",	// 打包生產(chǎn)環(huán)境

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

VUE實(shí)現(xiàn)大轉(zhuǎn)盤抽獎(jiǎng)
營(yíng)運(yùn)三寶(九宮格、大轉(zhuǎn)盤、老虎機(jī)，當(dāng)然此三寶當(dāng)然是最基礎(chǔ)的營(yíng)銷運(yùn)營(yíng)手段)，本片文章聊聊大轉(zhuǎn)盤，轉(zhuǎn)盤的實(shí)現(xiàn)邏輯應(yīng)該是營(yíng)銷方案較為簡(jiǎn)單的一種了，本文將介紹如何實(shí)現(xiàn)大轉(zhuǎn)盤抽獎(jiǎng)，感興趣的朋友可以參考下
2021-05-05
uni-app自定義組件詳細(xì)代碼示例
組件是vue技術(shù)中非常重要的部分,組件使得與ui相關(guān)的輪子可以方便的制造和共享,進(jìn)而使得vue使用者的開發(fā)效率大幅提升,這篇文章主要給大家介紹了關(guān)于uni-app自定義組件的相關(guān)資料,需要的朋友可以參考下
2024-02-02
VUE Token的失效處理詳解
這篇文章主要為大家介紹了VUE Token的失效處理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2021-11-11
在Vue中使用axios請(qǐng)求攔截的實(shí)現(xiàn)方法
這篇文章主要介紹了在Vue中使用axios請(qǐng)求攔截,需要的朋友可以參考下
2018-10-10
基于vue.js中事件修飾符.self的用法(詳解)
下面小編就為大家分享一篇基于vue.js中事件修飾符.self的用法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
vue el-table實(shí)現(xiàn)多選框回填的示例代碼
摘要：Vue多選框回填是實(shí)現(xiàn)表單數(shù)據(jù)高效處理的常見需求,本文主要介紹了vue el-table實(shí)現(xiàn)多選框回填的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-01-01
vue路由切換之淡入淡出的簡(jiǎn)單實(shí)現(xiàn)
今天小編就為大家分享一篇vue路由切換之淡入淡出的簡(jiǎn)單實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-10-10
Element-Plus實(shí)現(xiàn)動(dòng)態(tài)渲染圖標(biāo)的示例代碼
在Element-Plus中，我們可以使用component標(biāo)簽來(lái)動(dòng)態(tài)渲染組件，本文主要介紹了Element-Plus?實(shí)現(xiàn)動(dòng)態(tài)渲染圖標(biāo)教程，具有一定的參考價(jià)值，感興趣的可以了解一下
2024-03-03
vue與原生app的對(duì)接交互的方法(混合開發(fā))
vue開發(fā)h5項(xiàng)目特別是移動(dòng)端的項(xiàng)目，很多都是打包后掛載在原生APP上的，這篇文章主要介紹了vue與原生app的對(duì)接交互的方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2018-11-11
關(guān)于vue3編寫掛載DOM的插件問(wèn)題
這篇文章主要介紹了vue3編寫掛載DOM的插件的問(wèn)題，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2021-07-07