vite+vue3打包后index.html出现错误的解决方案

vite+vue3打包后index.html出现错误的解决方案

这个问题我遇到过很多遍，每次都是间隔很长时间遇到，然后彻底忘记当初是怎么解决的了，直接原地爆炸

这次一定得记录下来

一、报错原因

先说原因，并非是什么跨域的问题，打包后如果没有跨域请求接口，理论上不会报错，我就写了几个静态页面，怎么就跨域了呢

但是跨域问题确实存在，我正确打包前后，控制台都会报跨域错误，如下

但是，它不是影响我页面不显示的原因啊

真实的原因是，路由模式有问题，应该选择hash模式，而不是history模式

二、解决方案

1.跨域问题解决

参考网上的问题记录，很多人提到，要修改打包配置文件

我上一下我的vite.config.js文件

import { fileURLToPath, URL } from "node:url";import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueDevTools from "vite-plugin-vue-devtools";
import legacy from "@vitejs/plugin-legacy";import Components from "unplugin-vue-components/vite";
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";// https://vite.dev/config/
export default defineConfig({plugins: [vue(),legacy({targets: ["defaults", "not IE 11"],additionalLegacyPolyfills: ["regenerator-runtime/runtime"],}),vueDevTools(),Components({resolvers: [AntDesignVueResolver({importStyle: false, // css in js}),],}),],base: "./",resolve: {alias: {"@": fileURLToPath(new URL("./src", import.meta.url)),},},
});

关键点：

1. 增加了base: "./",，目的就是配置根目录的位置

2. 增加了以下代码块：

       legacy({targets: ["defaults", "not IE 11"],additionalLegacyPolyfills: ["regenerator-runtime/runtime"],}),
   

   以及legacy的导入，import legacy from "@vitejs/plugin-legacy";

   这里需要说一下，@vitejs/plugin-legacy需要单独安装，可能会和vite版本有冲突，升级或降级vite版本就行了

   这一步也有人说可以不需要配置，我没去验证了

实际上，我这么配置后，再执行打包命令，问题还是没有解决

2.路由模式更改

更改路由模式

route/index.js原来的history模式：

const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),...
})

改为hash模式：

const router = createRouter({history: createWebHashHistory(import.meta.env.BASE_URL),...
})

至此，问题完美解决，当然，控制台应该还是会报跨域错误