Vite+Vue3打包后index.html出现错误的解决方案
作者：栀椩
vite打包后页面空白还报跨域错误,别急,这可能不是跨域的问题,而是路由模式惹的祸,本文记录了一次vite项目打包后页面不显示的排查过程,发现将路由从history模式改为hash模式即可解决,同时分享了修改vite.config.js配置base和legacy插件的方法,帮你快速定位问题
这个问题我遇到过很多遍，每次都是间隔很长时间遇到，然后彻底忘记当初是怎么解决的了，直接原地爆炸
这次一定得记录下来
一、报错原因
先说原因，并非是什么跨域的问题，打包后如果没有跨域请求接口，理论上不会报错，我就写了几个静态页面，怎么就跨域了呢
但是跨域问题确实存在，我正确打包前后，控制台都会报跨域错误，如下
但是，它不是影响我页面不显示的原因啊
真实的原因是，路由模式有问题，应该选择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)),
},
},
});
关键点：
增加了base: "./",，目的就是配置根目录的位置
增加了以下代码块：
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),
...
})
至此，问题完美解决，当然，控制台应该还是会报跨域错误
到此这篇关于Vite+Vue3打包后index.html出现错误的解决方案的文章就介绍到这了,更多相关Vite Vue3打包后index.html出现错误内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！