Vite 設定開發環境與正式環境使用不同的 G-tag
PM 開了一項需求，希望在開發環境與正式部屬環境使用不同的 Google-Analytics 的評估碼 g-tag，之前在開發的時候都是寫死的，剛聽到這個需求，我有點不明所以。
請教了有處理過這個 issue 的前輩，才明白是使用了 vite-plugin-html 這個插件，分別在不同環境的env 檔案寫入對應的 g-tag，然後動態依據不同環境替換不同的 g-tag。
首先安裝 vite-plugin-html ：
npm i vite-plugin-html -D然後 vite 的根目錄，建立 .env 、.env.development 及 .env.production 三個檔案。
- .env 通用的環境變數
- .env.development 開發中的環境變數
- .env.production 產品完成布署的環境
.env 裡面寫入：
VITE_BASE_URL=/
VITE_GATAG=G-AAAAAAAAAA.env.development 裡面寫入：
VITE_GATAG-AAAAAAAAAA.env.production 裡面寫入：
VITE_GATAG=G-BBBBBBBBBB原本的 vite.config.js 長這樣：
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
// 解決 Network: use --host to expose
server: {
host: "0.0.0.0",
},
});然後現在把 vite.config.js 改成：
import { fileURLToPath, URL } from "node:url";
// import path from "path";
import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import { createHtmlPlugin } from "vite-plugin-html";
// https://vitejs.dev/config/
export default ({ mode }) => {
process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
return defineConfig({
base: process.env.VITE_BASE_URL,
plugins: [
vue(),
createHtmlPlugin({
minify: true,
inject: {
data: {
GA4: process.env.VITE_GATAG,
// injectScript: `<script src="./inject.js"></script>`,
},
},
}),
],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
});
};然後修改根目錄的 index.html，把原本放 g-tag 的地方替換成 <%- GATAG %>：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>標題</title>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=<%- GATAG %>"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "<%- GATAG %>");
</script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>Vite 設定開發環境與正式環境使用不同的 G-tag
https://popeye-ux.github.io/2023/02/12/vue-env-gtag/