快捷導(dǎo)航

一文搞明白vue開發(fā)者vite多環(huán)境配置

更新時間：2023年06月06日 09:21:48 作者：香菜+

Vue是一款流行的JavaScript框架,用于開發(fā)動態(tài)單頁應(yīng)用程序,本地安裝和環(huán)境配置是學(xué)習(xí)和使用Vue的第一步,下面這篇文章主要給大家介紹了關(guān)于vue開發(fā)者vite多環(huán)境配置的相關(guān)資料,需要的朋友可以參考下

1、原理

對于使用Vite構(gòu)建的Vue項目，可以使用Vite提供的環(huán)境變量來實現(xiàn)多環(huán)境配置。

Vite 使用 dotenv 從環(huán)境文件目錄中加載環(huán)境文件，默認(rèn)情況下，環(huán)境文件目錄為項目的根目錄，即把環(huán)境文件放在項目根目錄下。

環(huán)境文件命名如下：

.env                # 所有情況下都會加載
.env.local          # 所有情況下都會加載，但會被 git 忽略
.env.[mode]         # 只在指定模式下加載
.env.[mode].local   # 只在指定模式下加載，但會被 git 忽略

不同環(huán)境的變量可以定義在 .env.[mode] 文件中，如 .env.dev、.env.prod 等，如果 .env 文件和 .env.[mode] 中有相同的 key，后者定義的值會覆蓋前者。

這里咱們以三個環(huán)境為例編寫 demo，分別是：

開發(fā)環(huán)境，mode 為 dev，文件名為 .env.dev
測試環(huán)境，mode 為 uat，文件名為 .env.uat
生產(chǎn)環(huán)境，mode 為 prod，文件名為 .env.prod

2、創(chuàng)建配置文件

使用 .env 文件來設(shè)置特定環(huán)境的變量。Vite 會自動加載 .env 文件，而且支持使用不同的 .env 文件來為不同的環(huán)境提供變量。

在項目根目錄下創(chuàng)建.env.dev、.env.test和.env.prod等環(huán)境變量文件，并在其中定義各個環(huán)境的變量。例如：

NODE_ENV="development"
VITE_BASE_API="http://172.26.1.152:80"
VITE_BASE_WS="ws://172.26.1.152:18083"

注意，變量名必須以VITE_開頭，這是Vite默認(rèn)的前綴。

3、使用多環(huán)境配置

package.json中配置啟動腳本，使用配置

  "scripts": {
    "dev": "vite --mode dev",
    "test": "vite --mode test",
    "prod": "vite --mode prod",
    "build": "vue-tsc && vite build",
    "build:dev": "vue-tsc --noEmit && vite build --mode dev",
    "build:prod": "vue-tsc --noEmit && vite build --mode prod",
    "preview": "vite preview"
  },

4、使用環(huán)境變量

在Vue組件中使用環(huán)境變量：

<template>
  <div>
    <p>{{ apiURL }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      apiURL: import.meta.env.VITE_BASE_API
    }
  }
}
</script>

在Vue組件中可以通過import.meta.env.VITE_API_URL來訪問環(huán)境變量。

5、關(guān)于編輯器提示

可以添加 vite-env.d.ts解決。如果不存在這個文件，在 src 目錄下創(chuàng)建文件 vite-env.d.ts，我的項目下有，不記得是不是自己手動創(chuàng)建了

/// <reference types="vite/client" />
?
interface ImportMetaEnv {
  readonly VITE_BASE_API: string;
  readonly VITE_BASE_WS: string;
}?

6、最后驗證下

main.ts 打印下環(huán)境變量

客戶端訪問，打開控制臺可以看到環(huán)境變量，試著切換下看看生效了嗎

7、process.env和import.meta.env

process.env是Node.js中的全局變量，用于訪問進程中的環(huán)境變量。在前端開發(fā)中，我們通常使用Webpack等構(gòu)建工具來打包應(yīng)用程序，因此需要在構(gòu)建過程中設(shè)置環(huán)境變量。在Webpack中，可以使用DefinePlugin插件將環(huán)境變量注入到應(yīng)用程序中，然后在代碼中通過process.env來訪問這些變量。

例如，在Webpack中設(shè)置一個名為API_URL的環(huán)境變量，可以在代碼中通過process.env.API_URL來訪問它：

// webpack.config.js
module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.API_URL': JSON.stringify('https://api.example.com')
    })
  ]
}
 
// app.js
console.log(process.env.API_URL) // 'https://api.example.com'

import.meta.env是在ES模塊中定義的全局變量，用于訪問Vite構(gòu)建的應(yīng)用程序中的環(huán)境變量。在Vite中，可以在.env文件中定義環(huán)境變量，然后在Vue組件和JavaScript模塊中通過import.meta.env來訪問這些變量。

需要注意的是，process.env和import.meta.env的作用域不同，前者作用于整個Node.js進程，后者只作用于當(dāng)前的JavaScript模塊或Vue組件。因此，它們的用法和使用場景也有所不同。