feat: 新增直接打开dist/index.html文件访问的功能

新增命令build:file打包项目，可通过直接打开index.html访问

HandleHTML.js

@@ -0,0 +1,9 @@
+import fs from "fs";
+ 
+const htmlPath = "./dist/index.html"; // 打包后的html文件路径
+const htmlText = fs.readFileSync(htmlPath, 'utf8');
+const result = htmlText.replace(/\/log-lottery/g, '.')
+console.log(result)
+fs.writeFileSync(htmlPath, result, 'utf8');
+ 
+console.log("处理完成");

README.md

@@ -136,6 +136,14 @@ or
 npm run preview
 ```
 
+若想直接以打开html文件的方式运行，请执行以下命令进行打包。打包完成后在dist目录中直接打开index.html即可。
+
+```bash
+pnpm build:file
+or
+npm run build:file
+```
+
 > 项目思路来源于 <https://github.com/moshang-xc/lottery>
 
 ## License

package.json

@@ -8,6 +8,7 @@
         "dev": "vite --host 0.0.0.0",
         "build": "vue-tsc --noEmit && vite build",
         "build:pre": "vue-tsc --noEmit && vite build --mode prebuild",
+        "build:file": "vue-tsc --noEmit && vite build --mode file && node HandleHTML.js",
         "test": "vitest",
         "test:ui": "vitest --ui",
         "preview": "vite preview",
@@ -47,6 +48,7 @@
         "@types/three": "^0.166.0",
         "@typescript-eslint/eslint-plugin": "^8.16.0",
         "@typescript-eslint/parser": "^8.16.0",
+        "@vitejs/plugin-legacy": "^6.0.0",
         "@vitejs/plugin-vue": "^5.2.0",
         "@vitest/ui": "^2.1.5",
         "@vue/test-utils": "^2.4.6",

src/router/index.ts

@@ -1,4 +1,4 @@
-import { createRouter, createWebHistory } from 'vue-router';
+import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router';
 import Layout from '@/layout/index.vue';
 import Home from '@/views/Home/index.vue';
 export const configRoutes={
@@ -130,9 +130,10 @@ const routes = [
     ],
   },
 ];
-
+const envMode=import.meta.env.MODE;
 const router = createRouter({
-  history: createWebHistory(),
+    // 读取环境变量
+  history: envMode==='file'?createWebHashHistory():createWebHistory(),
   routes,
 });
 

vite.config.ts

@@ -10,6 +10,7 @@ import Icons from 'unplugin-icons/vite';
 import IconsResolver from 'unplugin-icons/resolver';
 import { visualizer } from 'rollup-plugin-visualizer';
 import viteCompression from 'vite-plugin-compression';
+import legacy from '@vitejs/plugin-legacy';
 // import vueDevTools from 'vite-plugin-vue-devtools'
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
@@ -17,9 +18,12 @@ export default defineConfig(({ mode }) => {
     const chunkName = mode == 'prebuild' ? '[name]' : 'chunk';
 
     return {
-        base:'/log-lottery/',
+        base:mode == 'file'?'./':'/log-lottery/',
         plugins: [
             vue(),
+            mode == 'file'?legacy({
+                additionalLegacyPolyfills: ['regenerator-runtime/runtime']
+              }):null,
             // vueDevTools(),
             viteCompression({
                 verbose: true,