今天把子系統推上了測試機，卻發生了不能登入的慘案。我本來以為是login沒有寫好，研究了很久，後來問了公司的devope工程師，他幫我看了之後，跟我說是我環境變數沒設好，就讓我來整理一下子系統的環境變數該怎麼設。
在 Vite 中使用 Vue做專案開發，會在.env檔中設定環境變數，針對不同的環境，設定不同的env檔，例如.env.develop是測試環境使用的，.env.production則放正式環境使用的環境變數。
那環境變數的內容是那哪些呢？
VITE_BASE_URL=/放入子系統路由/
VITE_APP_APPID=""
VITE_APP_APPKEY=""
VITE_APP_APIDOMAINNAME=http://API 環境的網域/
VITE_APP_DOMAINNAME=http://環境的網域/
VITE_GA4=GA監控碼我這次踩的坑就是沒有設 VITE_BASE_URL，導致 router 在抓路由的時候找不到子系統的路徑，直接往上去找整個平台的路由，所以登入就卡在登入頁面的第一行，既沒有mounted，更沒有去打 signIn 的API。
搭配路由要設定：
VITE_APP_GA=GA監控碼
VITE_BASE_URL=/子系統路由/
VITE_APP_DOMAINNAME=http://19X.16X.5X.XX/
VITE_APP_APIDOMAINNAME=http://19X.16X.5X.XX/
VITE_APP_APPID="XXXXXXXXXXXXXXXXXXXXXXX"
VITE_APP_APPKEY="XXXXXXXXXXXXXXXXXXXXXXX"在router.js 會這樣去抓 BASE_URL：history: createWebHashHistory(import.meta.env.BASE_URL)
let router = createRouter({
history: createWebHashHistory(import.meta.env.BASE_URL),
routes: [
...Object.keys(pages.public).map((a) => ({
name: a,
path: a,
component: pages.public[a],
meta: { allowAnonymous: true },
})),
],
});但是我設完環境變數，還是卡在登入頁面沒辦法進入網站，我研究了一下是 build 時產生的 index.js跟 index.css 沒有套到 BASE_URL。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,user-scalable=no"
/>
<title>網站名稱</title>
<script
type="module"
crossorigin
// 在/assets前面應該要放入子系統路由
src="/assets/index-f9de6ee9.js"
></script>
<!-- 在/assets前面應該要放入子系統路由 -->
<link rel="stylesheet" href="/assets/index-a495fa2b.css" />
</head>
<body>
<div id="app"></div>
</body>
</html>這件事的解法要從 vite.config.js 著手，但是要先安裝這兩個套件：
- vite-plugin-html
- dotenv
然後原本的 vite.config.js 要改寫為：
import { fileURLToPath, URL } from "node:url";
import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import { createHtmlPlugin } from "vite-plugin-html";
// https://vitejs.dev/config/
export default ({ mode }) => {
// require('dotenv').config({ path: `./.env.${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_GA4,
title: "wde",
// injectScript: `<script src="./inject.js"></script>`,
},
},
}),
// 新增 wom 所需套件
AutoImport({
resolvers: [ElementPlusResolver()],
}),
// Components({
// resolvers: [ElementPlusResolver()],
// }),
],
// sever
// sever
resolve: {
alias: {
// "@": path.resolve(_dirname,"./src")
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
});
};原本的 index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no">
<!-- <link rel="icon" href="/favicon.ico"> -->
<!-- <link rel="stylesheet" href="/css/reset.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<title><%- title %></title>
<script async src="https://www.googletagmanager.com/gtag/js?id=%VITE_APP_GA%"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', "<%- GA4 %>");
</script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>修改過 vite.config.js 產出的 index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,user-scalable=no"
/>
<title>網站名稱</title>
<script
type="module"
crossorigin
src="/子系統路由/assets/index-f9de6ee9.js"
></script>
<link rel="stylesheet" href="/子系統路由/assets/index-a495fa2b.css" />
</head>
<body>
<div id="app"></div>
</body>
</html>