vue配置生產(chǎn)環(huán)境.env.production與測(cè)試環(huán)境.env.development
靜下來(lái) 慢慢看
首先我們需要搭建一個(gè)項(xiàng)目
依賴包會(huì)自動(dòng)下載好 無(wú)需自己 npm i
- .env 無(wú)論什么環(huán)境都會(huì)加載
- .env.production 生產(chǎn)環(huán)境加載
- .env.development 測(cè)試開(kāi)發(fā)環(huán)境加載
我們下面的例子分開(kāi)來(lái)寫(xiě) 只用 .env.production .env.development
在項(xiàng)目根目錄新建兩個(gè)文件 分別為.env.production文件 .env.development文件
在文件里面我們配置如下
在.env文件
VUE_APP_NAME='vue測(cè)試名稱'
.env.development文件：
NODE_ENV = development VUE_APP_URL = 'developmentURL' //自定義變量 必須要以VUE_APP_開(kāi)頭定義
.env.production 文件：
NODE_ENV = production VUE_APP_URL = 'productionURL' //自定義變量 必須要以VUE_APP_開(kāi)頭定義
下面我們就需要配置 package.json
{
"name": "my",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
//打包測(cè)試開(kāi)發(fā)版本
//--mode 后面需要對(duì)用文件的名字.env.development 重點(diǎn)是要和.env.后面的名字對(duì)應(yīng)起來(lái)
"build-development": "vue-cli-service build --mode development",
//打包生產(chǎn)版本
//--mode 后面需要對(duì)用文件的名字.env.production 重點(diǎn)是要和.env.后面的名字對(duì)應(yīng)起來(lái)
"build-production": "vue-cli-service build --mode production",
"lint": "vue-cli-service lint"
},
...//json文件太長(zhǎng) 后面的沒(méi)用復(fù)制過(guò)來(lái) 主要看上面的scripts
}
下面我們?cè)赼pp.vue中打印一下我們?cè)O(shè)置的這個(gè)VUE_APP_URL
mounted() {
console.log(process.env,'process.env')
console.log(process.env.VUE_APP_URL, "VUE_APP_URL");
}
我們?cè)诒镜剡\(yùn)行
npm run serve
會(huì)加載.env和.env.development兩個(gè)文件
我們會(huì)看到控制臺(tái)打印
可以看到 process.env是一個(gè)全局對(duì)象 我們可以在對(duì)象上加自己需要的屬性
在運(yùn)行npm run serve的時(shí)候它會(huì)自動(dòng)編譯 測(cè)試開(kāi)發(fā)版本 所以能加在.env.development文件的變量
我們嘗試打包生產(chǎn)版本
npm run build-production
會(huì)在文件根目錄生成dist文件夾
我們嘗試在本地打開(kāi)dist 運(yùn)行vue打包好的文件
我們需要在全局安裝 http-server 這個(gè)npm包
npm i -g http-server
我們進(jìn)到 dist文件夾中
打開(kāi)cmd
執(zhí)行http-server
在瀏覽器打開(kāi) 看看控制臺(tái)打印
確實(shí) 就是我們?cè)赼pp.vue下打印的變量，值就是我們?cè)?env和.env.production里面設(shè)置的值；
由此 大大的方便了我們的打包流程，不需要每次打包測(cè)試URL、生產(chǎn)URL來(lái)回切換了~
我們可以將這個(gè)VUE_APP_URL封裝到axios中 更加方便了我們開(kāi)發(fā)~
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue動(dòng)態(tài)添加表單的實(shí)現(xiàn)方法
在Vue.js應(yīng)用中,動(dòng)態(tài)表單是一個(gè)常見(jiàn)的需求,尤其是當(dāng)表單字段的數(shù)量和類型需要根據(jù)用戶輸入或系統(tǒng)狀態(tài)動(dòng)態(tài)變化時(shí),本文將詳細(xì)介紹如何在Vue中實(shí)現(xiàn)動(dòng)態(tài)表單的創(chuàng)建,并通過(guò)多個(gè)示例展示具體的實(shí)現(xiàn)方法,需要的朋友可以參考下2024-09-09
VUE elTree無(wú)子級(jí)隱藏展開(kāi)圖標(biāo)方式
這篇文章主要介紹了VUE elTree無(wú)子級(jí)隱藏展開(kāi)圖標(biāo)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了vue $router和$route的區(qū)別詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
使用vue構(gòu)建移動(dòng)應(yīng)用實(shí)戰(zhàn)代碼
本篇文章主要介紹了使用vue構(gòu)建移動(dòng)應(yīng)用實(shí)戰(zhàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
這篇文章主要介紹了Vue混入mixins滾動(dòng)觸底的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
基于vue2.0動(dòng)態(tài)組件及render詳解
下面小編就為大家分享一篇基于vue2.0動(dòng)態(tài)組件及render詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vue使用ajax(axios)請(qǐng)求后臺(tái)數(shù)據(jù)的方法教程
在vue中經(jīng)常會(huì)用到數(shù)據(jù)請(qǐng)求,下面這篇文章主要給大家介紹了關(guān)于Vue使用ajax(axios)請(qǐng)求后臺(tái)數(shù)據(jù)的方法教程,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue?組件上的v-model雙向綁定原理,從本文的學(xué)習(xí)可以知道組件上v-model指令的本質(zhì)也是生成了value屬性和input事件，具體實(shí)例代碼跟隨小編一起看看吧2022-05-05
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商品規(guī)格選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
使用VUE3開(kāi)發(fā)很久了,但一直沒(méi)進(jìn)行總結(jié)和記錄,下面這篇文章主要給大家介紹了關(guān)于從零開(kāi)始搭建vue3項(xiàng)目的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06