詳解vue 不同環(huán)境配置不同的打包命令
最近做的一個(gè)項(xiàng)目是配置了三個(gè)環(huán)境的：正式環(huán)境、測(cè)試環(huán)境和開發(fā)環(huán)境，下面以這個(gè)為例
第一步：安裝cross-env
npm i --save-dev cross-env
或者在
package.json中加上"cross-env": "^5.0.1"進(jìn)行安裝依賴
package.json:
//這是我項(xiàng)目的目錄
第二步：修改各環(huán)境下的參數(shù)
在config/目錄下添加test.env.js、develop.env.js。并且修改文件里的內(nèi)容
config/prod.env.js
config/develop.env.js
第三步：更改build文件夾的東西
1.給build文件夾下增加環(huán)境文件 webpack.develop.conf.js
2.修改build.js
默認(rèn)打包都是prod環(huán)境，我這里改成了默認(rèn)是測(cè)試環(huán)境
打印是什么環(huán)境
3.修改webpack.prod.conf.js
4.修改webpack.base.conf.js
由于config/index.js配置不同的環(huán)境，靜態(tài)文件取得是不同的目錄，所以這邊要根據(jù)不同的環(huán)境取出不同的配置，如果配置一樣，那就無需區(qū)分了
config/index.js
config/index.js dev運(yùn)行
config/index.js 開發(fā)環(huán)境配置
config/index.js 測(cè)試環(huán)境配置
config/index.js 正式環(huán)境配置
第四步： 輸入不同的命令打包環(huán)境
"build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js", "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js", "build--develop": "cross-env NODE_ENV=develop env_config=develop node build/build.js"
測(cè)試環(huán)境打包： npm run build--test
正式環(huán)境打包： npm run build--prod
開發(fā)環(huán)境打包： npm run build--develop
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue 使用插槽分發(fā)內(nèi)容操作示例【單個(gè)插槽、具名插槽、作用域插槽】
這篇文章主要介紹了vue 使用插槽分發(fā)內(nèi)容操作,結(jié)合實(shí)例形式總結(jié)分析了vue.js使用單個(gè)插槽、具名插槽、作用域插槽相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2020-03-03
vue實(shí)現(xiàn)吸頂、錨點(diǎn)和滾動(dòng)高亮按鈕效果
這篇文章主要介紹了vue實(shí)現(xiàn)一個(gè)簡(jiǎn)單的吸頂、錨點(diǎn)和滾動(dòng)高亮按鈕效果,需要的朋友可以參考下2019-10-10
vue實(shí)現(xiàn)tab欄點(diǎn)擊高亮效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)tab欄點(diǎn)擊高亮效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要介紹了vue如何重置data、組件中的data為什么是一個(gè)函數(shù)、為什么new Vue里的data可以是一個(gè)對(duì)象，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
基于vue+echarts實(shí)現(xiàn)柱狀圖漸變色效果(每個(gè)柱子顏色不同)
前段時(shí)間的vue項(xiàng)目中用到了echarts柱狀圖,由于UI設(shè)計(jì)稿中要求使用漸變色,并且每個(gè)柱子的顏色不同,于是做了一番研究,現(xiàn)將我的實(shí)現(xiàn)方案分享如下2024-05-05
Pinia是Vue的存儲(chǔ)庫,它允許您跨組件/頁面共享狀態(tài),Pinia的成功可以歸功于他管理存儲(chǔ)數(shù)據(jù)的獨(dú)特功,下面這篇文章主要給大家介紹了關(guān)于Vue3中pinia使用方法的相關(guān)資料,需要的朋友可以參考下2023-04-04
Vue.JS項(xiàng)目中5個(gè)經(jīng)典Vuex插件
在本文中，將向你展示5個(gè)特性，你可以通過 Vuex 插件輕松地添加到下一個(gè)項(xiàng)目中。一起來學(xué)習(xí)下。2017-11-11
詳解vue2.0+vue-video-player實(shí)現(xiàn)hls播放全過程
這篇文章主要介紹了詳解vue2.0+vue-video-player實(shí)現(xiàn)hls播放全過程，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
vue 實(shí)現(xiàn)input表單元素的disabled示例
今天小編就為大家分享一篇vue 實(shí)現(xiàn)input表單元素的disabled示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
css文件可以直接引入到main.js中,scss文件如果沒有scss特殊語法也可以直接引入index.js,只有scss文件中的特殊語法全局引入的時(shí)候無法顯示,所以需要特殊處理,下面這篇文章主要給大家介紹了關(guān)于vue全局引入scss樣式文件的相關(guān)資料,需要的朋友可以參考下2022-11-11