Vue 項目打包后環(huán)境變量丟失問題（清除緩存），區(qū)分.env和.env.*文件

問題背景

今天在導(dǎo)報項目的時候遇到一個問題問題：在開發(fā)環(huán)境中一切正常，但在打包后的生產(chǎn)環(huán)境中，某些環(huán)境變量（如 VUE_APP_BASE_API）無法正確讀取，導(dǎo)致出現(xiàn) VUE_APP_BASE_API 不存在 的錯誤。

下面就解決這個問題，讓環(huán)境變量在打包后的生產(chǎn)環(huán)境中能夠正常使用，進行了進一步的思考衍生。

知識儲備

要解決上面的問題需要，了解一下下面的內(nèi)容

在開發(fā) Vue 項目的過程中，使用環(huán)境變量來管理不同環(huán)境下的配置（例如 API 地址、密鑰等）。

文件.env

開發(fā)環(huán)境和生產(chǎn)環(huán)境公用的一些配置

//.env
VUE_APP_NAME=red潤
VUE_APP_BASE_API=/api2
VUE_APP_API_BASE_URL=https://本地開發(fā)地址.com

文件.env.productioin

生產(chǎn)環(huán)境單獨使用的配置，如果和.env內(nèi)容相同，.env.production將會覆蓋.env里面的內(nèi)容

VUE_APP_API_BASE_URL=https://線上域名.com
VUE_APP_BASE_API=/api

在 Vue CLI 中，環(huán)境變量的加載是有優(yōu)先級的。當(dāng)你運行構(gòu)建命令時（如 npm run build），Vue CLI 會按以下順序加載環(huán)境變量：

1. .env：基礎(chǔ)的環(huán)境變量文件，通常包含開發(fā)、生產(chǎn)和測試等環(huán)境共享的變量。
2. .env.local：如果存在，它會覆蓋 .env 中的變量，適用于本地開發(fā)環(huán)境（注意：此文件通常不會提交到版本控制中）。
3. .env.development 或 .env.production：這些文件用于特定環(huán)境（開發(fā)環(huán)境、生產(chǎn)環(huán)境等），會覆蓋 .env 和 .env.local 中的相同變量。
4. .env.development.local 或 .env.production.local：這些是針對特定環(huán)境的本地配置文件，會覆蓋上述所有文件中的變量。

所以，在你的情況下，如果 .env.production 和 .env 中有相同的環(huán)境變量，process.env.VUE_APP_BASE_API 的值會使用 .env.production 中的值，而 .env 中的配置會被覆蓋。

問題描述

在本地開發(fā)時，使用以下代碼來引用環(huán)境變量：

const version = `${process.env.VUE_APP_BASE_API}`;

在開發(fā)環(huán)境下，process.env.VUE_APP_BASE_API 正常返回預(yù)期的值。

但是，當(dāng)進行打包構(gòu)建時，線上環(huán)境卻出現(xiàn)了 VUE_APP_BASE_API 不存在 的錯誤，導(dǎo)致 API 請求無法正常發(fā)起。

問題原因

這個問題通常發(fā)生在 Vue CLI 構(gòu)建項目時，它會自動根據(jù)不同環(huán)境加載不同的 .env 文件。如果 .env.production 或 .env 中沒有正確配置環(huán)境變量，或者構(gòu)建過程沒有正確讀取到這些變量，線上就無法獲取到相應(yīng)的環(huán)境變量。

解決方案

以下是幾種常見的解決方法，我們可以逐一排查。

1. 確保 .env 文件配置正確

首先，確保你已經(jīng)在項目根目錄下創(chuàng)建了 .env 或 .env.production 文件，并且在文件中定義了所需要的環(huán)境變量。例如：

VUE_APP_BASE_API=https://your-api-endpoint.com

注意：Vue CLI 會自動加載以 VUE_APP_ 為前綴的環(huán)境變量。如果你的環(huán)境變量沒有以 VUE_APP_ 開頭，它將不會被嵌入到最終的構(gòu)建中。

2. 清除緩存并重新打包（這是我的解決方案ok）

有時候舊的構(gòu)建緩存可能導(dǎo)致環(huán)境變量沒有被更新。為了確保環(huán)境變量被正確加載，可以嘗試在打包時加上 --no-cache 標(biāo)志：

enpm run build --no-cache

這將確保構(gòu)建過程從頭開始，而不會使用任何緩存文件。

3. 打包時檢查環(huán)境變量

你可以在構(gòu)建過程中使用 console.log(process.env) 來檢查環(huán)境變量是否正確加載?？梢栽?src/main.js 或 src/App.vue 中添加以下代碼來調(diào)試：

console.log(process.env);  // 打印所有環(huán)境變量

這將幫助你確認(rèn)構(gòu)建后的代碼中是否包含了你設(shè)置的 VUE_APP_BASE_API 變量。

4. 使用 webpack 的 DefinePlugin 明確注入環(huán)境變量（究極方案）

如果以上方法都沒有解決問題，可以嘗試通過 webpack 的 DefinePlugin 來顯式地將環(huán)境變量注入到構(gòu)建代碼中：

// vue.config.js
const webpack = require('webpack');module.exports = {configureWebpack: {plugins: [new webpack.DefinePlugin({'process.env.VUE_APP_BASE_API': JSON.stringify(process.env.VUE_APP_BASE_API)})]}
}

這樣，VUE_APP_BASE_API 將被直接注入到打包后的代碼中，確保在生產(chǎn)環(huán)境中能夠正常使用。

• webpack.DefinePlugin 的作用

webpack.DefinePlugin 用于在打包時，靜態(tài)地將代碼中的指定字符串替換為給定的值。它會查找代碼中的匹配項，并將其替換為我們提供的值。這是一種預(yù)處理機制，允許你在構(gòu)建時動態(tài)替換代碼中的常量值。

• process.env 與環(huán)境變量

在 Node.js 中，process.env 是一個包含所有環(huán)境變量的對象。在 Vue CLI 中，process.env 主要用于訪問不同的環(huán)境變量。像 VUE_APP_BASE_API 這樣的變量通常在 .env 文件中定義，并通過 process.env.VUE_APP_BASE_API 來訪問。

然而，process.env 只是 Node.js 的一個對象，Webpack 在構(gòu)建過程中并不會自動注入這些環(huán)境變量。因此，使用 DefinePlugin 插件，可以手動將這些環(huán)境變量注入到構(gòu)建代碼中。

• JSON.stringify() 的作用

在 webpack.DefinePlugin 中，值需要以字符串的形式提供，因為 Webpack 會在構(gòu)建時進行替換。直接傳遞 JavaScript 的對象或變量是無效的，因此必須使用 JSON.stringify() 將 process.env.VUE_APP_BASE_API 的值轉(zhuǎn)換為一個字符串，這樣 Webpack 才能正確地將它嵌入到構(gòu)建后的代碼中。

例如，如果 .env 中的 VUE_APP_BASE_API 為 https://api.example.com，JSON.stringify() 會將其轉(zhuǎn)換為字符串 'https://api.example.com'，然后 Webpack 會將代碼中所有 process.env.VUE_APP_BASE_API 的引用替換為這個字符串。

• 如何工作

通過這種方式，Webpack 會在構(gòu)建時查找代碼中所有的 process.env.VUE_APP_BASE_API，并將其替換為 https://api.example.com（或其他 .env 文件中定義的值）。

舉個例子，假設(shè)你在 Vue 組件中使用以下代碼：

const apiUrl = process.env.VUE_APP_BASE_API;

在構(gòu)建時，Webpack 會將 process.env.VUE_APP_BASE_API 替換為你在 webpack.DefinePlugin 中定義的值，即：

const apiUrl = 'https://api.example.com';

5. 檢查部署環(huán)境的環(huán)境變量配置

如果你使用 CI/CD 進行自動化構(gòu)建，確保部署環(huán)境（例如 Docker、云平臺等）中也已經(jīng)配置了正確的環(huán)境變量。在一些部署平臺中，你可能需要手動設(shè)置環(huán)境變量，以便構(gòu)建過程能正確讀取。

總結(jié)

通過上述方法，我們可以有效地解決 Vue 項目在打包后，環(huán)境變量丟失的問題。我們解決思路如下：

1. 確保 .env 文件正確配置。
2. 清除緩存并重新打包。
3. 使用 console.log(process.env) 檢查環(huán)境變量是否正常加載。
4. 使用 webpack DefinePlugin 明確注入環(huán)境變量。
5. 確保部署環(huán)境配置了正確的環(huán)境變量。

Happy coding!

😄