feat: 适配 HTML5 模式路由 (#11)

* feat: 适配 HTML5 模式路由

.env.development

@@ -3,3 +3,7 @@ NODE_ENV = development
 
 # 自定义的环境变量可以修改（命名必须以 VITE_ 开头）
 VITE_BASE_API = 'https://vue-typescript-admin-mock-server-armour.vercel.app/mock-api/v1'
+# 路由模式 hash 或 html5
+VITE_ROUTER_HISTORY = 'hash'
+# 打包路径（网站前缀）
+VITE_PUBLIC_PATH = '/'

.env.production

@@ -3,3 +3,7 @@ NODE_ENV = production
 
 # 自定义的环境变量可以修改（命名必须以 VITE_ 开头）
 VITE_BASE_API = 'https://vue-typescript-admin-mock-server-armour.vercel.app/mock-api/v1'
+# 路由模式 hash 或 html5
+VITE_ROUTER_HISTORY = 'html5'
+# 打包路径（网站前缀）
+VITE_PUBLIC_PATH = '/'

.env.staging

@@ -3,3 +3,7 @@ NODE_ENV = production
 
 # 自定义的环境变量可以修改（命名必须以 VITE_ 开头）
 VITE_BASE_API = 'https://vue-typescript-admin-mock-server-armour.vercel.app/mock-api/v1'
+# 路由模式 hash 或 html5
+VITE_ROUTER_HISTORY = 'html5'
+# 打包路径（网站前缀）
+VITE_PUBLIC_PATH = '/'

src/router/index.ts

@@ -1,4 +1,4 @@
-import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"
+import { createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw } from "vue-router"
 const Layout = () => import("@/layout/index.vue")
 
 /** 常驻路由 */
@@ -202,7 +202,10 @@ export const asyncRoutes: Array<RouteRecordRaw> = [
 ]
 
 const router = createRouter({
-  history: createWebHashHistory(),
+  history:
+    import.meta.env.VITE_ROUTER_HISTORY === "hash"
+      ? createWebHashHistory(import.meta.env.VITE_PUBLIC_PATH)
+      : createWebHistory(import.meta.env.VITE_PUBLIC_PATH),
   routes: constantRoutes
 })
 

types/env.d.ts

@@ -3,4 +3,6 @@
 /** 声明 vite 环境变量的类型（如果未声明则默认是 any） */
 declare interface ImportMetaEnv {
   readonly VITE_BASE_API: string
+  readonly VITE_ROUTER_HISTORY: "hash" | "html5"
+  readonly VITE_PUBLIC_PATH: string
 }

vite.config.ts

@@ -8,7 +8,7 @@ import UnoCSS from "unocss/vite"
 export default (): UserConfigExport => {
   return {
     /** 打包时根据实际情况修改 base */
-    base: "./",
+    base: import.meta.env.VITE_PUBLIC_PATH,
     resolve: {
       alias: {
         /** @ 符号指向 src 目录 */