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