vue3.x打包之后空白页解决办法(一)

最新推荐文章于 2024-09-18 09:53:11 发布
最新推荐文章于 2024-09-18 09:53:11 发布
阅读量7.1k 收藏 2
点赞数 1
分类专栏： vue3.x 我爱你们~~ 文章标签： 崩溃边缘中。。。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43971794/article/details/88898898
版权

vue3.x打包之后空白页报错解决
首先说 如果用vue3.x打包之后打开index.html时报错如下在这里插入图片描述
出现这样的报错，请在你的VUE项目的根目录创建一个vue.config.js
在这里插入图片描述
将下面这句话打入
在这里插入图片描述
这句话的大概意思就是把打包之后的路径从子目录变成同级目录查找

打包之后空白页不报错

然而打包之后再访问index.html
发现还是一样空白页但是不报错了。
此时需要打开你的dist打包文件去下载一个依赖包
打开命令行输入 npm install http-server -g
成功之后再输入 http-server
然后根据显示连接再去访问就可以了

这个只是解决方法的其中之一

掘墓忍者
关注
专栏目录
vue3+vite - 打包编译后页面白屏、CORS跨域、加载js/html文件失败、图片不显示、音视频不显示问题，解决打包生成index.html页面显示空白、找不到资源、报资源跨域打不开报错问题！
高级前端工程师
05-30 6636
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
vue-cli3项目打包后页面空白（vue-cli3版本）
qq_37021104的博客
12-21 3824
首先，如果想要打包后，直接打开index.html页面查看效果，就只需要修改vue.config.js文件，找不到这个文件怎么办呢？去项目的根目录，自己新建一个vue.config.js文件，与package.json同级。创建后输入以下代码： module.exports = { publicPath:'./' } 重新打包，就可以直接点击index.html查看效果了。 如果想要把项...
解决vue3打包过后空白页面
小菜鸟的博客
04-08 4096
解决vue3打包过后空白页面 在项目根目录下，新建一个vue.config.js文件 module.exports = { // 基本路径 publicPath: './', // 输出文件目录 outputDir: 'dist', configureWebpack: { externals: { } } } 如果还是不可以，那么需要找到如下页面： ...
Vue3快速上手
最新发布
lizi88888的博客
09-18 2567
// 引入对应的useXxxxxStore import {useSumStore} from '@/store/sum' // 调用useXxxxxStore得到对应的store const sumStore = useSumStore()
vue3打包后页面空白解决方法
.
01-12 1860
vue3项目打包后页面空白解决方法
Vue3打包发布后，页面运行起来空白
cwhzm的博客
07-10 1928
1、npm run build 后 把dist 文件夹中的文件传到 云服务，跑起来是空白的。
vue3打包后打开页面部分空白如何解决？
qq_20604185的博客
05-17 5928
我个人的原因是router的history模式引起的。 做以下几点，问题解决。 1.修改vue.config.js const { defineConfig } = require('@vue/cli-service') //const path = require("path"); //const resolve = function(dir) { // return path.join(__dirname, dir); //}; module.exports = defineConfig({
Vue项目部署在Spring Boot出现页面空白问题的解决方案
12-02
在开发Vue应用并将其部署到Spring Boot环境中时，可能会遇到页面加载空白的问题。这通常是由于文件路径配置不正确，导致CSS、JavaScript等静态资源无法被正确加载。在本篇文章中，我们将深入探讨这个问题，并提供一...
vue2.x-vant-demo
04-11
【Vue2.x-Vant-Demo】是一个基于Vue2.x框架和Vant UI库的示例项目，用于展示如何在实际开发中应用这两个技术。Vue2.x是目前广泛使用的前端JavaScript框架，它提供了组件化、虚拟DOM、响应式数据绑定等功能，极大地...
vue打包静态资源后显示空白及static文件路径报错的解决
11-19
这个问题以前就处理过，是打包过程中出现错误频率较高的一种，可能有3处地方会出现这种情况 1、记得改一下config下面的index.js中bulid模块导出的路径。因为打包后的index.html里边的内容都是通过script标签引入的，...
vue3打包页面不显示问题
lihaoztiantian的博客
06-30 882
打包静态资源查看不了解决 第一步：router文件夹下的index.js里注释或修改路由方式 下面代码 仅供参考 /** *@2018-10-08 *@author trsoliu *@describe vue-cli 3.x配置文件 */ const path = require(‘path’); const vConsolePlugin = require(‘vconsole-webpack-plugin’); // 引入 移动端模拟开发者工具 插件 （另：https://github.com/lir
vue3打包后部分页面空白
Shawn的个人博客
08-03 707
一、问题描述 在开发模式下，使用命令npm run serve运行可以正常显示，但使用npm run bulid打包后打开index.html文件发现显示白屏，但是资源都能正常获取，其他页面也显示正常。 二、问题解决 查找了很长时间。发现问题是透明度的问题，原来我在一个页面设置的透明度为75%，但是打包后显示则为1%，原因好像是预处理器无视了百分号，把75这个值clip到1%，因此无法显示出来。这里把opacity设置为小数，把75%设置为0.75重新打包即可正常显示。 ...
Vue3打包后页面空白解决办法
qq_41241504的博客
08-17 1375
Vue打包后页面空白解决办法
vue3项目，本地页面正常显示，打包后页面空白
lth002的博客
09-11 776
通过浏览器的页面元素选择定位到问题是因为路由没有正确加载，但是排查了路由文件，入口文件，vite.config.js文件，都没有发现任何问题，直到将路由文件里面的按需加载页面文件改成直接加载，才正确渲染出了页面，才发现按需加载写错了。
vue-cli3项目，浏览器运行正常，打包后页面空白报错，解决方案
面对疾风吧
08-16 9800
vue-cli3创建的项目，打包后页面空白报错解决 萌新专用，直接复制过去就ok，直接上代码 在你的项目里新建一个文件：vue.congif.js ，是src的同级目录下创建，不是src里面创建文件哦！ 然后复制这段代码过去就OK了，直接打包运行就行了。我都帮你配置好了。如果要上线的话，你记得改改路径，路径名称要加上你的服务器的，当然如果只是打包后不放在服务器上，直接打包运行就ok。 就像下......
解决vue3项目打包发布到服务器后访问页面显示空白问题
m0_59006402的博客
12-01 2977
2.router里面的路由模式改为 createWebHashHistory。env.VITE_PUBLIC_PATH 的值如下。1.在 vite.config.ts 文件中 加入。
vue3实战-如何解决vue3项目打包发布到服务器后访问页面显示空白问题
0月影星云0的博客
03-21 5029
1、处理vue.config.js文件中的publicPath，处理如下： const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ publicPath: process.env.NODE_ENV === 'production' ? './' : '/', outputDir: 'dist', indexPath: 'index.html', lintOnSave: false,
Vue3打包发布,刷新出现的空白页面和错误
weixin_44600235的博客
07-11 1216
Vue3打包发布出现的错误：Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of text/html. Strict MIME type checking is enforced for module scripts per HTML spec.
Vue3+vite打包后页面空白问题
05-16 2456
二、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。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值