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í)例代碼
這篇文章主要介紹了vue下拉列表功能實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2018-04-04
element-plus中如何實(shí)現(xiàn)按需導(dǎo)入與全局導(dǎo)入
本文主要介紹了element-plus中如何實(shí)現(xiàn)按需導(dǎo)入與全局導(dǎo)入，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
VUE3+TS遞歸組件實(shí)現(xiàn)TreeList設(shè)計(jì)實(shí)例詳解
這篇文章主要為大家介紹了VUE3+TS遞歸組件實(shí)現(xiàn)TreeList設(shè)計(jì)實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
淺談Vue?DIFF
本文主要介紹了淺談Vue?DIFF，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
vue3+ts封裝彈窗及封裝分頁(yè)的示例代碼
這篇文章主要介紹了vue3+ts封裝彈窗及封裝分頁(yè)的示例代碼,本文通過(guò)定義defaultDialog .vue,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-08-08
如何使用elementUI組件實(shí)現(xiàn)表格的分頁(yè)及搜索功能
最近在使用element-ui的表格組件時(shí),遇到了搜索框功能的實(shí)現(xiàn)問(wèn)題,這篇文章主要給大家介紹了關(guān)于如何使用elementUI組件實(shí)現(xiàn)表格的分頁(yè)及搜索功能的相關(guān)資料,需要的朋友可以參考下
2023-03-03
Vue表單輸入的雙向綁定失效原因與解決方案
在Vue.js開發(fā)中,雙向綁定是實(shí)現(xiàn)表單輸入與數(shù)據(jù)同步的核心特性之一,然而,在實(shí)際開發(fā)中,開發(fā)者可能會(huì)遇到雙向綁定失效的問(wèn)題,導(dǎo)致表單輸入無(wú)法正確更新數(shù)據(jù)或視圖,本文將探討雙向綁定失效的常見原因,并提供相應(yīng)的解決方案,需要的朋友可以參考下
2025-03-03
vue2.0實(shí)戰(zhàn)之使用vue-cli搭建項(xiàng)目（2）
這篇文章主要為大家詳細(xì)介紹了vue2.0實(shí)戰(zhàn)第二篇使用vue-cli搭建項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
使用electron-builder將項(xiàng)目打包成桌面程序的詳細(xì)教程
這篇文章主要介紹了使用electron-builder把web端的項(xiàng)目打包生成桌面程序,并可安裝程序,文中通過(guò)代碼示例和圖文結(jié)合的方式給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下
2024-08-08
Vue攔截器原理以及詳細(xì)使用方法
這篇文章主要給大家介紹了關(guān)于Vue攔截器原理以及詳細(xì)使用的相關(guān)資料,Vue攔截器通常用于在發(fā)送請(qǐng)求或響應(yīng)數(shù)據(jù)時(shí)對(duì)其進(jìn)行一些處理或修改,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
2023-08-08