前言

我們在 vue 項目的目錄中經(jīng)?？吹?env 開頭的文件，在文件內(nèi)聲明一些變量，這些變量就是一些配置變量，在不同環(huán)境下可使用的變量。

# 頁面標(biāo)題
VITE_APP_TITLE = 管理系統(tǒng)

# 開發(fā)環(huán)境配置
VITE_APP_ENV = 'development'

# 管理系統(tǒng)/開發(fā)環(huán)境
VITE_APP_BASE_API = '/'

環(huán)境

項目的運行不止在我們敲代碼的時候，還在正式使用時等等，在這些情況我們區(qū)分為有本地環(huán)境、測試環(huán)境、預(yù)生產(chǎn)、生產(chǎn)環(huán)境等等。

在這不同環(huán)境下，代碼運行的情況肯定是不一樣的，這個時候就需要 env 文件，來控制其中變化的情況，實現(xiàn)差異性配置。

env 命名

通常 env 文件命名如下：

• .env 所有環(huán)境(開發(fā)、測試、生成等）均會加載并合并該文件。
• .env.development 開發(fā)環(huán)境
• .env.production 生產(chǎn)環(huán)境

其中.env、.env.development、.env.production 文件的命名為固定格式，不能改變，否則讀取不到文件。

文件讀取

package.json vue 中所需要的的依賴會根據(jù)該文件來安裝。

• scripts：支持的腳本
• dependencies: 生產(chǎn)環(huán)境依賴包列表
• devDependencies: 開發(fā)環(huán)境、測試環(huán)境依賴包列表

而在 package.json 文件中 有 scripts字段用來定義腳本命令， Vue 會根據(jù)啟動命令自動加載對應(yīng)的環(huán)境配置文件。其中的屬性是用來運行 npm run 命令的，屬性名可以隨意更改；而屬性的值，才是真正運行的命令，是固定的。

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode development",
    "build:pro": "vue-cli-service build --mode production",
    "build:test": "vue-cli-service build --mode test",
  },

配置環(huán)境變量

該文件注釋用 # 號開頭，定義變量直接是 屬性 = 值。

# 頁面標(biāo)題
VITE_APP_TITLE = 管理系統(tǒng)

# 環(huán)境配置
VITE_APP_ENV = 'development'

# api 基礎(chǔ)路徑
VITE_APP_BASE_API = '/dev-api'
// 或
VUE_APP_BASE_API = '/dev-api'

使用

我們知道了在不同環(huán)境下使用相應(yīng) env 文件中的變量，那么想要在項目中使用該變量要怎么做呢？

在項目中，如果我使用的是 vite ，要想在項目中使用變量的開頭就需要是 VITE_，而不是 VITE_ 開頭的變量就不能被獲取到。

// 在 vite 程序中獲取
console.log(import.meta.env.VITE_APP_BASE_API); // /dev-api
// 在 vue2 項目中獲取
console.log(process.env.VUE_APP_BASE_API); // /dev-api

在 vite 中對于不支持 import.meta.env來獲取變量，我們可以使用 Vite 導(dǎo)出的 loadEnv 函數(shù)來加載指定的 .env 文件

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
  // 根據(jù)當(dāng)前工作目錄中的 `mode` 加載 .env 文件
  // 如果當(dāng)前環(huán)境是開發(fā)環(huán)境，則 mode 為 development
  // 設(shè)置第三個參數(shù)為 '' 來加載所有環(huán)境變量，而不管是否有 `VITE_` 前綴。
  const env = loadEnv(mode, process.cwd(), '')
  const { VITE_APP_BASE_API } = env // VITE_APP_BASE_API = /dev-api
  return {
    // vite 配置
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV),
    },
  }
})

總結(jié)

• 默認(rèn)情況下 .env 文件要放在和 package.json 同一目錄下才可以被加載，除非在配置文件中更改加載目錄。
• 不同的環(huán)境會加載不同的 .env 文件。
• 要想使用環(huán)境變量，變量的開頭有固定要求，在 vite 項目中以 VITE_ 開頭，在 vue2 項目中以 VUE_APP 開頭。

到此這篇關(guān)于詳解在vue開發(fā)中如何利用.env文件的文章就介紹到這了,更多相關(guān)vue利用.env文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論