在看項目的過程中，發(fā)現(xiàn)有類似服務(wù)端多環(huán)境配置的配置，所以研究了下，在網(wǎng)上有多個方案，選了一個當(dāng)前在用的吧，另外一個沒驗證
1、原理
對于使用Vite構(gòu)建的Vue項目，可以使用Vite提供的環(huán)境變量來實現(xiàn)多環(huán)境配置。
Vite 使用?dotenv?從?環(huán)境文件目錄?中加載環(huá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默認的前綴。
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組件。因此，它們的用法和使用場景也有所不同。
?文章來源地址http://www.zghlxwxcb.cn/news/detail-457620.html
推薦一本書
- 樹立正確的Git觀念，可以讓你在工作中選用正確的Git指令。
- 終端機指令搭配圖行界面工具，使學(xué)習(xí)效率倍增。
- 不只教你如何用，還能讓你知道自己在用什么，以及為什么要這么用。
京東自營購買鏈接：
《Git從入門到精通》(高見龍)【摘要 書評 試讀】- 京東圖書
?
文章來源：http://www.zghlxwxcb.cn/news/detail-457620.html
?
到了這里，關(guān)于vue開發(fā)者vite多環(huán)境配置，終于搞明白了的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
