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

關(guān)于vue設(shè)置環(huán)境變量全流程

 更新時間:2022年03月29日 11:44:47   作者:木槿之夏  
這篇文章主要介紹了關(guān)于vue設(shè)置環(huán)境變量全流程,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

vue設(shè)置環(huán)境變量

在開發(fā)的時候一般會有是三個環(huán)境:開發(fā)環(huán)境 測試環(huán)境 線上環(huán)境

vue 中有個概念就是模式,默認先vue cli 有三個模式

  • development模式用于 vue-cli-service serve
  • production模式用于 vue-cli-service build 和 vue-cli-service test:e2e
  • test模式用于 vue-cli-service test:unit

但是往往開發(fā)的時候可能不止有三種:

  • 本地環(huán)境(local)
  • 開發(fā)環(huán)境(development)
  • 測試環(huán)境(devtest)
  • 預(yù)發(fā)布環(huán)境(beta)
  • 生產(chǎn)環(huán)境(production)

參考鏈接:配置環(huán)境變量

創(chuàng)建不同環(huán)境變量文件

在這里插入圖片描述

如官方文檔所說,通過為.env文件增加后綴來設(shè)置某個模式下特有的環(huán)境變量。我這里有5個環(huán)境,所以配置了5個.env文件。如下圖:

在這里插入圖片描述

給.env文件添加內(nèi)容

基本格式如下:

NODE_ENV=環(huán)境名稱VUE_APP_URL=對應(yīng)的環(huán)境地址

如我本地環(huán)境的配置就如下圖所示:

在這里插入圖片描述

我本地是用的easy-mock模擬的數(shù)據(jù),所以配置的地址是mock接口地址。

在package.json中添加不同環(huán)境對應(yīng)的執(zhí)行語句

如官方文檔所說,可以通過傳遞 --mode 來配置不同的模式。我自己的項目配置如下圖:

在這里插入圖片描述

使用

文件已創(chuàng)建好,配置語句也已寫好。怎么用它呢?

首頁你需要哪個環(huán)境,就執(zhí)行哪個環(huán)境的命令語句。

比如我現(xiàn)在需要local環(huán)境,就執(zhí)行 npm run local-serve 。

如下圖所示:

在這里插入圖片描述

然后通過 process.env.NODE_ENV 獲取環(huán)境名;通過 process.env.VUE_APP_URL 獲取環(huán)境對應(yīng)的url。

比如我們在axios請求中,就可以把它的baseURL設(shè)置為 process.env.VUE_APP_URL 

如下圖所示:

在這里插入圖片描述

如果你不確定你自己現(xiàn)在是在哪個環(huán)境變量下,可以 console.log(“當(dāng)前環(huán)境變量:”+process.env.NODE_ENV) 和 console.log(“當(dāng)前環(huán)境路徑:”+process.env.VUE_APP_URL) 看下。

總而言之就是,你需要哪個環(huán)境變量,就 【npm run 對應(yīng)的環(huán)境變量】 就完事了! 

多環(huán)境變量

什么是多環(huán)境變量?

項目在運行時會根據(jù)啟動的指令來運行不同的環(huán)境,在不同的環(huán)境中,我們配置對應(yīng)所需的變量來滿足我們的開發(fā)需求,稱為多環(huán)境變量。

環(huán)境一般分為開發(fā)環(huán)境,測試環(huán)境,生產(chǎn)環(huán)境

配置流程

1、在項目根目錄下的package.json中配置serve test build

通過 --mode xxx 來執(zhí)行不同環(huán)境

"scripts": {
? "serve": "vue-cli-service serve --open",
? "test": "vue-cli-service build --mode testing",
? "build": "vue-cli-service build",
}

–open 是運行的時候自動開出頁面

  • 通過 npm run serve 啟動本地 , 執(zhí)行 development
  • 通過 npm run test 打包測試 , 執(zhí)行 testing
  • 通過 npm run build 打包正式 , 執(zhí)行 production

2、在項目根目錄下創(chuàng)建.env.*文件

.env.development 本地開發(fā)環(huán)境配置

NODE_ENV='development'

.env.production 正式環(huán)境配置

?NODE_ENV='production'

.env.staging 測試環(huán)境配置

NODE_ENV='production'

3.在src下面創(chuàng)建一個config文件夾下面配置三個相對應(yīng)的的js

重新配置三個是因為修改起來方便,不需要重啟項目,符合開發(fā)習(xí)慣。

// 根據(jù)環(huán)境引入不同配置 process.env.NODE_ENV
const config = require('./env.' + process.env.NODE_ENV)
module.exports = config

配置對應(yīng)環(huán)境的變量,拿本地環(huán)境文件 env.development.js 舉例,用戶可以根據(jù)需求修改

// 本地環(huán)境配置
module.exports = {
? title: 'vue-h5-template',
? baseUrl: 'http://localhost:9018', // 項目地址
? baseApi: 'https://test.xxx.com/api', // 本地api請求地址
? APPID: 'xxx',
? APPSECRET: 'xxx'
}

4.在我們根目錄下的src文件內(nèi)main.js文件中引入

import {baseUrl} from "./config/index";
// 因為導(dǎo)出的是一個對象,結(jié)構(gòu)賦值
console.log(baseUrl);

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

相關(guān)文章

  • Element中el-select下拉框?qū)崿F(xiàn)選中圖標(biāo)并回顯圖標(biāo)

    Element中el-select下拉框?qū)崿F(xiàn)選中圖標(biāo)并回顯圖標(biāo)

    本文主要介紹了Element中el-select下拉框?qū)崿F(xiàn)選中圖標(biāo)并回顯圖標(biāo),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-12-12
  • 深入了解Vue3中偵聽器watcher的實現(xiàn)原理

    深入了解Vue3中偵聽器watcher的實現(xiàn)原理

    在平時的開發(fā)工作中,我們經(jīng)常使用偵聽器幫助我們?nèi)ビ^察某個數(shù)據(jù)的變化然后去執(zhí)行一段邏輯。在?Vue.js?2.x?中,你可以通過?watch?選項去初始化一個偵聽器,稱作?watcher。本文將詳細為大家介紹一下偵聽器的實現(xiàn)原理,需要的可以參考一下
    2022-04-04
  • vue中使用element-ui進行表單驗證的實例代碼

    vue中使用element-ui進行表單驗證的實例代碼

    這篇文章主要介紹了vue中使用element-ui進行表單驗證的實例代碼,本文給大家分享實現(xiàn)思路,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-06-06
  • element的el-upload組件上傳文件跨域問題的幾種解決

    element的el-upload組件上傳文件跨域問題的幾種解決

    跨域問題網(wǎng)上搜索很多,感覺情況都不一樣,本文主要介紹了element的el-upload組件上傳文件跨域問題的幾種解決,具有一定的參考價值,感興趣的可以了解一下
    2024-03-03
  • 詳解基于iview-ui的導(dǎo)航欄路徑(面包屑)配置

    詳解基于iview-ui的導(dǎo)航欄路徑(面包屑)配置

    這篇文章主要介紹了詳解基于iview-ui的導(dǎo)航欄路徑(面包屑)配置,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-02-02
  • 如何利用vue.js實現(xiàn)拖放功能

    如何利用vue.js實現(xiàn)拖放功能

    這篇文章主要給大家介紹了如何利用vue.js實現(xiàn)拖放功能的相關(guān)資料,本文并未使用現(xiàn)有的庫,而是使用內(nèi)置的HTML拖放API來實現(xiàn)簡單的拖放系統(tǒng),需要的朋友可以參考下
    2021-06-06
  • vue3+uniapp 上傳附件的操作代碼

    vue3+uniapp 上傳附件的操作代碼

    uni-file-picker搭配uni.uploadFile在使用問題上踩了不少坑,我至今還是沒辦法在不改uniapp源碼基礎(chǔ)上實現(xiàn)限制重復(fù)文件的上傳,這篇文章介紹vue3+uniapp 上傳附件的操作代碼,感興趣的朋友一起看看吧
    2024-01-01
  • 詳解gantt甘特圖可拖拽、編輯(vue、react都可用?highcharts)

    詳解gantt甘特圖可拖拽、編輯(vue、react都可用?highcharts)

    去年我遇到了一個甘特圖的需求,做了很多工作,最終還是不完美,今天使用一個新包,給大家重新學(xué)習(xí)下vue?甘特圖gantt的相關(guān)知識,感興趣的朋友一起看看吧
    2021-11-11
  • vue實現(xiàn)釘釘?shù)目记谌諝v

    vue實現(xiàn)釘釘?shù)目记谌諝v

    這篇文章主要為大家詳細介紹了vue實現(xiàn)釘釘?shù)目记谌諝v,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-05-05
  • Vue+ElementUI 中級聯(lián)選擇器Bug問題的解決

    Vue+ElementUI 中級聯(lián)選擇器Bug問題的解決

    這篇文章主要介紹了Vue+ElementUI 中級聯(lián)選擇器Bug問題的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07

最新評論