Vite+Vue3打包后index.html出现错误的解决方案
更新时间：2026年07月12日 13:36:14 作者：栀椩
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出现错误内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了nuxt3中server routes的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
vue中this.$refs有值,但无法获取ref的值问题及解决
这篇文章主要介绍了vue中this.$refs有值,但无法获取ref的值问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
在路由时传递参数，一般有两种形式，一种是拼接在url地址中，另一种是查询参数。这篇文章主要介绍了Spring Boot/VUE中路由传递参数,需要的朋友可以参考下2018-03-03
这篇文章主要介绍了Vue之关于Eslint自动加分号的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
vue cli3.x打包后如何修改生成的静态资源的目录和路径
这篇文章主要介绍了vue cli3.x打包后如何修改生成的静态资源的目录和路径，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04![解决antd 下拉框 input [defaultValue] 的值的问题](//img.jbzj.com/images/xgimg/bcimg5.png)
解决antd 下拉框 input [defaultValue] 的值的问题
这篇文章主要介绍了解决antd 下拉框 input [defaultValue] 的值的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了vue 重塑数组之修改数组指定index的值操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
本文主要介绍了vue+element 分页封装的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要介绍了vue项目动态设置页面title及是否缓存页面的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了vue2.0实现检测无用的代码并删除方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
![解决antd 下拉框 input [defaultValue] 的值的问题](http://img.jbzj.com/images/xgimg/bcimg5.png)
最新评论