vue3.x:vite打包后页面打开空白报错解决

最新推荐文章于 2024-08-13 16:33:43 发布
最新推荐文章于 2024-08-13 16:33:43 发布
阅读量3.7k 收藏 3
点赞数
分类专栏： Vue 3.0 Vite 文章标签： 前端 node.js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AIB_Kasic/article/details/123159452
版权
Vue 3.0 同时被 2 个专栏收录
100 篇文章 1 订阅
订阅专栏
Vite
4 篇文章 0 订阅
订阅专栏

在本地调试服务环境解决.

在项目终端输入

npm install -g serve

安装服务器环境

安装完成后，输入

serve -s dist

运行后启动服务域名就可以了
在这里插入图片描述

土生土长的IU
关注
专栏目录
vue3+vite - 打包编译后页面白屏、CORS跨域、加载js/html文件失败、图片不显示、音视频不显示问题，解决打包生成index.html页面显示空白、找不到资源、报资源跨域打不开报错问题！
高级前端工程师
05-30 5742
vue3，vite，build，打包编译，vite打包后页面白屏，index.html，dist，跨域，CORS报错，图片不显示，资源js加载出错，部署服务器后打开，页面空白，网页不显示，浏览器控制台，全是报错，vite+vue3执行build打包后index.html无法打开怎么办，打不开咋办，啥也不显示，index.html打开空白，打开cors跨域怎么解决，网页上线后一刷新就报错，上线后，typescript，ts，404-Page Not Found，vite build后访问报错，Vite+Vue
Vue3 - 完美解决 vite 打包后在本地浏览器直接打开运行，build 打包后双击 index.html 直接以 file 协议运行网站（资源、接口等正常访问，和部署到服务器运行效果一样）
王佳斌
09-07 1万+
vue3 vite怎么支持file协议本地打开，vite打包文件如何支持files协议,支持双击即可打开网页，vue3 vite打包后双击本地运行，vue3 vite打包后怎么直接在浏览器双击打开访问，vite打包后显示空白，vite如何支持本地file协议打开，vue3 vite打包后如何本地查看网站，vue3 vite项目打包后本地启动白屏怎么办，vite打包后的代码如何在本地运行，vite+vue3 打包在fIle本地index.html打开项目，打包后如何直接打开index.html文件，vue3
VUE打包时报错
qq_38998337的博客
06-25 2139
自定义目录标题) VUE打包时报错 一直以来还没遇到解决不了的问题,然而今天遇到一个很头疼的问题,求助各位大佬!!! 问题来源: 使用了网上找来的一个emoji组件,不是通过npm install安装的插件,就是一个文件夹,直接拉到了项目中使用. 效果如下: 问题: 打包时UglifyJS报错了 undefined??? 难道这里不应该是错误信息的描述吗?所以无从下手啊,网上也没找到解决办法...
Vue下路由History模式打包后页面空白的解决方法
12-09
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息. 这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官方有解释,需要加一个base // base: '/history', // mode: 'history', 这个base即为项目路径. 以上两个都解决了,还是会发现,此时只有首页能访问,通
记录一个困扰两天的bug,vue3代码用vite打包运行出错的问题
最新发布
guiplan
08-13 303
由于开发环境是正常的，生产环境是坏的，所以无法定位代码哪里错误，只能用排除法，不断修改，打包，修改，打包。后来才发现上面的案例中gameStatus的一个父组件与子组件的通信，我只要改了gameStatus就报错，什么$refs undfined特别的无语。只能换一个方式来处理，这种游戏状态组件里直接用局部变量，myStatus来做判断，然后父组件直接修改子组件的myStatus。这种形式的写法就可以直接获取组件了。首先的第一个问题是proxy.$refs.组件名称，这种写法突然不支持了，其他页面支持。
使用vite打包的vue3 ，页面展示为空白
qq_54601164的博客
05-08 1032
vite默认根目录"/"，file://…访问需要基于index.html的路径，需要再vit.config.js中进行以下配置。vite构建打包后，默认启用ES Module，跨module加载引用涉及跨域，file://…问题：通过npm run build 打包后，点击dist文件夹中的index.html时页面一片空白；需要安装vite插件@vitejs/plugin-legacy。安装成功之后在vit.config.js引入并使用。起因：想看一下做的项目的静态版本。
Vue3+vite打包后页面空白问题
05-16 1944
二、vue3 vite打包后页面白屏控制台报错Access to script at 'file:///E:/vueProject/vue3-project/Vue3-big-event-admin/dist。1 安装兼容插件 @vitejs/plugin-legacy。原因：资源路劲问题修改：vite.config.ts。在vite.config.ts 中进行配置。然后到 dist目录下在cmd 中运行。想要查看，可以安装一个本地服务器插件。四、nginx.conf。
解决vite打包后项目出现空白的问题
IM_GOOD的博客
04-02 3959
修改路由模式，我之前是用的History模式，结果有问题，把router中index文件改为Hash模式。因为我写的纯静态，到这里问题就已经能解决了。后面如果要写接口，又出现问题了，那再说吧。这是由于路径的问题，解决方案，vite.config.ts中加上路径都为相对路径。2. 页面还是空白，并且检查元素发现app节点中什么都没有，
vite 打包页面空白
hero_th的博客
10-04 8559
根据vite 官网的打包配置教程 这里需要着重强调一点 问题 / 跟 ./ 这两个东西 完全不是用一个路径 Solution 将 vite 里面的配置文件是 vite.config.js 在配置里写上 base: './' 即可解决。
vue3 vite打包后页面控制台报错Access to script at ‘file:///E:/vueProject/vue3-project/Vue3-big-event-admin/dist
WDY2018312901的博客
09-17 1671
vue3 vite打包后页面控制台报错Access to script at 'file:///E:/vueProject/vue3-project/Vue3-big-event-admin/dist
Vue 2.0在IE11中打开项目页面空白的问题解决
08-29
Vue 2.0在IE11中打开项目页面空白的问题解决 Vue 2.0是一个流行的前端框架，然而在IE11中打开项目页面时，可能会出现空白的问题。这个问题的出现是因为Babel默认只转换新的JavaScript句法（syntax），而不转换新的...
vue-cli打包后本地运行dist文件中的index.html操作
10-14
页面空白通常与Vue CLI的版本有关，Vue CLI 2和Vue CLI 3处理打包后的静态资源路径的方式有所差异。对于Vue CLI 2，需要修改config/index.js文件中的assetPublicPath的路径为相对路径“./”。对于Vue CLI 3，则需要...
vite打包静态文件打开显示空白
A_bet_of_three_years的博客
01-31 6360
vue3+vite进行打包生成的文件访问显示空白
Vue/Vite打包后空白以及部署到Gitee后空白解决方法
coderYYY的博客
10-23 1万+
Vue打包后页面空白解决办法 在vue.config.js（）中添加以下代码（如果没有这个文件自己手动建一个） build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static',
记一次「 Vite打包后使用浏览器打开，显示空白问题」
qq_45735625的博客
05-14 1292
1.问题描述：在使用vite+vue3+Vant做前端页面时，本地运行测试没有问题，输入打包命令打包后直接点击index.html在页面访问空白。2.出现原因：vite 项目打包后预览需要有服务器的支持，直接用浏览器打开是不能访问的。除此之外，vite在package.json 中也有提供预览配置，预览会自动启用服务器。否则上线后可能还是会空白，并在控制台有如下报错信息。(1) 在项目文件夹全局安装serve;否则可能会出现页面空白，并报如下错误；(2) 在打包目录输入运行命令。直接输入运行命令即可。
Vite + Vue3 + Ts 解决打包生成的index.html页面 显示空白、报资源跨域、找不到资源、404-Page Not Found等错误
热门推荐
沐枫
01-04 2万+
Vite3 + Vue3 + Ts 解决打包生成的index.html页面显示空白、报资源跨域、找不到资源、404-Page Not Found等错误。 在用Vue3 + Ts进行项目开发，通过Vite进行构建打包后，直接在本地以文件系统的方式，用浏览器直接打开dist目录下的index.html文件访问时，浏览器页面显示空白、打开控制台后有报错、应该路径找不到对应的文件。
vite+vue3编译后打开index.html空白
qq_43566808的博客
05-24 4008
打包后的文件，通过file协议无法直接打开，白屏报错跨域等一系列问题
理解Vue2.x：虚拟DOM的高效diff算法解析
"这篇文章主要探讨了Vue2.x框架中的虚拟DOM(diff)原理，以及如何通过高效的算法实现DOM的高效更新。作者汪玉林是高级工程师，具有丰富的Web前端架构经验。文章首先介绍了Vue的核心——双向绑定和虚拟DOM，强调了虚拟...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值