欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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.后面的名字對應起來
    "build-development": "vue-cli-service build --mode development",
    //打包生產(chǎn)版本
    //--mode 后面需要對用文件的名字.env.production 重點是要和.env.后面的名字對應起來
    "build-production": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  },
  ...//json文件太長 后面的沒用復制過來  主要看上面的scripts
}

下面我們在app.vue中打印一下我們設置的這個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里面設置的值；

由此 大大的方便了我們的打包流程，不需要每次打包測試URL、生產(chǎn)URL來回切換了~

我們可以將這個VUE_APP_URL封裝到axios中 更加方便了我們開發(fā)~

總結(jié)

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

相關(guān)文章

最新評論