vue项目（build）打包后页面空白问题处理

最新推荐文章于 2024-07-11 13:01:52 发布
最新推荐文章于 2024-07-11 13:01:52 发布
阅读量1.1k 收藏 5
点赞数 1
分类专栏： router打包 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LZL_68/article/details/129149094
版权
在确认router使用hash模式的前提下，文章指导如何创建vue.config.js文件并配置publicPath为./。完成配置后，需重新打包项目，以解决刷新页面时的问题。此过程适用于Vue项目的特定部署场景。
摘要由CSDN通过智能技术生成

1、前提确认router路由模式是hash模式，如果是history模式注释即可

2、新建vue.config.js文件，在里面写入如下代码

module.exports = {

    publicPath: './'

}

3、重新打包，再重新打包index.html文件打开刷新

 

小姑娘笔记总结
关注
专栏目录
vue项目打包部署后页面空白
flyiiiiii的博客
10-22 992
创建vue.config.js文件，输入： module.exports = { publicPath: './' } 如果没生效，在vue-ui可视化界面中设置 路由设置为hash或默认模式，router->index.js const router = new VueRouter({ routes: [ { path: '/', redirect: '/login' } ] // mode: 'history' }); 重新.
vue打包后显示空白正确处理方法
08-28
很多朋友遇到这样的问题当vue打包后显示空白问题，遇到这样的问题怎么处理呢？下面脚本之家小编给大家分享下vue打包后显示空白正确处理方法，感兴趣的朋友一起看看吧
【个人笔记】Vue.js 项目在打包后出现空白页
最新发布
qq_63856835的博客
07-11 407
Vue.js 项目在打包后出现空白页。
vue build 后页面空白
风吹稻花香的博客
02-01 1997
新建了一个Vue 项目，本地运行正常，build后放到服务器，页面空白，没有报错，以前因为根路径问题出现过空白页，但是基本都会,报404，这次没报错，检查路径配置 publicPath: './', 也没问题，去空白页看了下，发现有app标签，但是标签里是空的，就去router里看了下，发现这次建的router和之前不一样，默认使用了history模式，项目不是在根路径下， 所以就出现空白页了。 解决办法 1.将history模式换回hash。2.将history模式下的base路径根据服务器的路径配置
vue通过build打包后 打开index.html页面是空白的
weixin_41439996的博客
06-28 2万+
最近在build打包vue项目遇到了几个问题，如下： 1、npm run build打包项目之后，我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器，但最近发现直接打开index.html页面是空白的，还会报几个错，找不到页面路径。 原因：找到config文件下index.js，全局搜索assetsPublicPath，结果是assetsPublicPa...
Vue打包npm run build 打包后空白怎么解决？
weixin_34082789的博客
09-15 623
问题一：路径报错并且页面空白 解决：buld/index.js assetsPublicPath: '/'修改为assetsPublicPath: './' 问题二：没报错页面空白router-view中的内容显示不出来。路由history模式。 HTML5 History模式 解决：// mode: 'history',//将这个模式关闭就好 这里并...
vue打包之后出现空白页的原因以及解决方式
热门推荐
温情
04-02 3万+
路由模式 history 新建项目什么都不动，路由模式：history, 直接npm run build打包 打包之后，直接打开dist文件里面的ndex.html可以看到页面是空白的，控制台是这样的。 再看看网页源码, 对比dist文件夹结构可以看到资源路径的引入是错误的，应该用'./'而不是'/' 那怎么修改打包之后的路径呢？查看vue-cli官网配置参考中的publicPath 我们只需要在和package.json同级的地方新增一个vue.config.js文
vue项目打包后打开页面空白解决办法
08-27
要解决 Vue 项目打包后打开页面为空白的问题，需要检查 config 文件中的 index.js 文件，确保 build 模块导出的路径正确，并且检查路由配置文件中的模式设置。如果模式设置为 history 模式，需要在服务端添加一个...
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
01-19
Vue项目运行npm run build后会生成一个dist文件夹，我们一般都是把这个文件夹部署到服务器上。dist文件夹里边有一个static文件和一个index.html页面，这个index就是最后单页面的最终文件。 问题一：我在打包完成后，...
Vue下路由History模式打包后页面空白的解决方法
08-27
History 模式可以解决这些问题，但是新手往往会碰到 History 模式打包后页面空白的情况，这个问题是因为 Vue 官方没有正确地配置路由的 base 参数所导致的。 解决方法是，在 vue-router 的配置中添加 base 参数，...
vue解决执行打包之后打开页面空白问题
qq_60976312的博客
12-28 1940
解决执行build打包命令之后打开dist文件下的html页面空白的问题
vue cli3 在build 打包完成，访问的时候空白页，路径错误
zxh7770的博客
06-04 1280
vue cli3 在build 打包的完成，访问的时候空白页，路径错误 阐述 在使用cli3 开发的过程中，不会出现空白页的问题，因为都是访问的localhost。但是项目完成以后，打包上线，访问的时候出现空白页。 解决方案如下： 在src文件夹同级目录下创建vue.config.js文件 这里在网上查看的有的是写：baseUrl，在npm run serve的时候发现会报错：Invalid options in vue.config.js: “baseUrl” is not allowed。原因是c
Vue项目本地run与build后样式不同，build后样式不生效
源码好优多
03-08 5984
在Vue项目开发过程中遇到两次，本地运行正常，build后在服务器上样式没有生效，或者在本地的效果没有正常显示， 下面一一说明： 一、多个相同样式文件同时存在项目中 现象：修改组件时，在项目中复制了一个组件重命名后进行修改，在本地执行正常，后打包上传，无法展示正常效果。 解决过程：在本地试图修改总是不见效果，在控制台查看样式仍是之前的样式，把其中一处样式在所有相关组...
vue-cli3.0的配置文件vue.config.js
飞翔༒之翼
10-15 824
在网上找了很多的这个配置文件，但都有bug，下面这个虽然配置少但没有报错： vue.config.js module.exports = { // 基本路径 baseURL已经过时 publicPath: './', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build with in-browser comp
【Vue3+Vite】解决build后空白页的问题
提笔忘字的帝国
11-27 1042
build后空白页的问题可能是使用的是历史模式，因为Vue是一个单页的客户端应用，如果没有适当的服务器配置，访问会得到一个 404 错误。使用Hash模式接口解决这个问题，因为使用Hash模式后由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。缺点就是对SEO不友好。
使用 vue-cli-service build 打包的 vue 项目出现白屏
猛犸象
03-11 248
使用 vue-cli-service build 打包的 vue 项目出现白屏
Vue打包后报错，页面显示空白
大桶爆米花eee
07-01 348
问题描述： 打包之后，生产环境页面显示空白，且控制台报错，如下： 解决办法： 将webpack.prod.config.js中publicPath修改为"/" 参考：Vue 刷新后页面空白，报Uncaught SyntaxError: Unexpected token的问题 webpack 配置 publicPath的理解 ...
vue 生产环境build打包出现空白页面的解决方法
qq_38472451的博客
08-12 417
vue 生产环境build打包出现空白页面的解决方法
vue项目打包后，打开页面为空白的解决办法
m0_51060602的博客
03-10 1万+
vue项目打包上线后，出现空白页面的解决办法
Vue项目打包后出现空白的解决策略
Vue.js 框架开发应用，并通过 `npm run build` 命令进行打包后，发现页面出现空白的情况。这通常是由多种原因引起的，其中包括但不限于： 1. **静态资源路径问题**：Vue 项目的静态资源（如 CSS、图片、字体等）在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值