Vue3+vite打包后页面空白问题及解决
更新时间：2026年06月30日 10:33:01 作者：西门飘雪01
这段文章主要讨论了Vue3项目使用Vite打包后页面白屏的问题及其解决方案,文章指出,问题可能源于资源路径配置错误或跨域问题,并提供了修改vite.config.ts文件和配置@vitejs/plugin-legacy插件的方法,同时,建议安装本地服务器插件并配置Nginx解决跨域问题
一、白屏
原因：
资源路劲问题修改：vite.config.ts
export default defineConfig({
plugins: [vue()],
// 打包路径设置
base: process.env.NODE_ENV === 'production' ? './' : '/',
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})二、vue3 vite打包后页面白屏控制台报错
Access to script at 'file:///E:/vueProject/vue3-project/Vue3-big-event-admin/dist
1 安装兼容插件 @vitejs/plugin-legacy
npm i @vitejs/plugin-legacy -D
在vite.config.ts 中进行配置
// 引入@vitejs/plugin-legacy
import { defineConfig} from 'vite'
import legacy from '@vitejs/plugin-legacy';
// 在plugins中添加
export default defineConfig({
plugins: [
legacy({
targets: ['defaults', 'not IE 11']
}),
vue()
],
base：'./'
})
三、打包后依旧打开还是白屏
原因是需要服务器进行静态资源访问，否则会因为跨域而报错：
想要查看，可以安装一个本地服务器插件
npm install http-server -g
然后到 dist目录下在cmd 中运行
http-server -p 8090
然后输入地址访问就ok：
四、nginx.conf
server {
listen 80;
server_name localhost;
location /my_project {
alias F:/test/dist;
index index.html index.htm;
if (!-e $request_filename) {
rewrite ^/(.*) /my_project /index.html last;
break;
}
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue3+vite3+typescript实现验证码功能及表单验证效果
这篇文章主要介绍了vue3+vite3+typescript实现验证码功能及表单验证效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要为大家详细介绍了Vue实现省市区三级联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要为大家详细介绍了vue+js点击箭头实现图片切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了Vue在页面右上角实现可悬浮/隐藏的系统菜单,实现思路大概是通过props将showCancel这个Boolean值传递到子组件，对父子组件分别绑定事件，来控制这个系统菜单的显示状态。需要的朋友可以参考下2018-05-05
这篇文章主要为大家介绍了vue.js项目中使用原生js实现移动端的轮播图，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
本文分步骤给大家介绍了Vue 1.0自定义动画效果，vue1.0代码结合animate.css定义动画，页面一定要引入animate.cdd，具体实例代码大家参考下本文2018-07-07
本文直接上 Vue3 + TypeScript + Element Plus 开发的内容，感兴趣的话一起来看看吧2021-08-08
本篇文章主要介绍了利用Vue v-model实现一个自定义的表单组件的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
debounce是lodash工具库中的一个非常好用的函数。这篇文章主要介绍了Vue.js页面中有多个input搜索框如何实现防抖操作,需要的朋友可以参考下2019-11-11
这篇文章主要介绍了vue源码解析之事件机制原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
最新评论