vue.js部署项目页面空白问题

最新推荐文章于 2024-07-11 11:54:27 发布
置顶 最新推荐文章于 2024-07-11 11:54:27 发布
阅读量2.6k 收藏 4
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33871178/article/details/84560650
版权

1，将项目打包 使用npm run build 命令，会在工程里生成dist文件夹
在这里插入图片描述
2.2.在服务器上的Tomcat的 webapps文件夹下,新建一个文件夹如dist
在这里插入图片描述
3.将tomcat shutdown以后upload到dist文件夹
4.如果上传以上出现空白页面，可以配置一下config 下的index.js文件里面的选项 ，assetsPublicPath 设置成绝对路径
在这里插入图片描述
5.然后设置router文件夹下的index.js ，base加上这一行，就可以解决了。
在这里插入图片描述
6成功，这是我测试服务器上的项目
在这里插入图片描述

杜杜的杜
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue项目部署线上后页面空白解决办法, Vue项目打包发布线上后页面空白, 控制台报错解决方案
gu_eu的博客
11-24 1759
Vue项目部署线上后页面空白 这里将路由模式改成hash模式 const router = new VueRouter({ base: '/', mode: 'hash', routes, }) export default router 在Vue2.6 版本 vue.config.js 文件是需要我们自己创建的 创建文件后写下如下代码 module.exports = { publicPath: '/', // 注意 这里使用 / 如果不行的话 就 ./ outpu
vue项目打包到后部署服务器，某些页面出现空白页
weixin_54000091的博客
03-27 1919
今天将vue项目打包后的文件放到服务器上，首页和有些其他模块页面可以访问。但是出现了一些二级页面空白，nginx报404的问题。 解决办法 1.首先找到 vue.config.js 的配置文件，如果没有可以手动创建。然后更改其公共资源目录, 如果是vue-cli3的项目，则更改publicPath:’./’ ,其他版本的另行查阅资料 效果如下 2.找到router配置文件，更改其路由模式为hash，并且base属性为随着项目环境变化而变化。效果如下 ...
Vue3打包发布,刷新出现的空白页面和错误
最新发布
weixin_44600235的博客
07-11 719
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.
vue打包部署到服务器时页面空白的问题
zgg的博客
05-31 3453
因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。 解决办法：vue.config.js下的assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和static在同一级目录下面。 所以要改为 ‘./ ’; 再次执行 npm run build 就可以了。 ...
Vue项目打包部署后首页空白的问题
X北辰北的博客
01-21 3733
问题描述 在进行项目开发的时候，用Vue进行项目框架的搭建并开发，开发完成时需要部署到客户现场，通过命令 npm run build 将项目打包，然后上传至服务器的tomcat目录下，然后通过地址访问时发现，系统首页加载空白。 在浏览器控制台一看，是js和css等资源的引用路径出错，所以解决方法如下。 解决方法 1、网上好多文档都说在项目的根目录下找到config文件夹，然后将...
解决部署vue时，访问地址出现的空白页问题
野的博客
03-22 1281
检查 Vue-router 中使用的是哪种模式 ：hash模式和history模式 使用hash模式可以解决空白页的问题，原因路由路径的问题导致的，如果history模式，你使用nginx启动，那么再根目录下是没有问题的，但是使用tomcat的时候，就会出现空白页 ...
Vue项目部署在Spring Boot出现页面空白问题的解决方案
10-17
关于Vue项目在Spring Boot中部署遇到页面空白问题，其背后涉及到前端路由与后端配置之间的相互作用，以及资源加载路径的适配问题。这一问题在前后端分离的应用架构中尤为常见，因此掌握相应的解决策略对于前端开发者...
vue.js 打包时出现空白页和路径错误问题及解决方法
10-16
在使用Vue.js开发项目的过程中，我们常常需要将项目打包成静态资源以便部署到服务器上。然而，在执行`npm run build`命令进行打包时，可能会遇到一些问题，如出现空白页和路径错误。这些问题通常会影响到项目的正常...
vue.js九宫格抽奖特效代码
03-20
Vue.js是一种轻量级的前端JavaScript框架，以其易学易用和组件化开发特性而闻名。在本案例中，"vue.js九宫格抽奖特效代码"是一个利用Vue.js实现的互动式抽奖应用，它展示了如何在Web应用中创建一个动态的、具有视觉...
VUE 解决mode为history页面为空白的问题
10-16
总结，解决Vue Router `mode: 'history'`导致的页面空白问题，关键在于前端和后端的配合。前端配置`webpack-dev-server`的`historyApiFallback`，而后端配置能捕获所有未知路径并将它们重定向到`index.html`。通过...
VUE打包后显示为空白页的解决办法（包括vue-element-admin项目）
汪蛋的博客
10-21 3901
问题描述： VUE 项目用指令 npm run dev 运行后打开网址可以正常显示网页内容，但是用指令 npm run build 进行打包部署后，生成的dist文件夹中 index.html 文件在浏览器中打开为空白页。 解决方案： 在项目中打开【config】文件夹中的【index.js】文件，如下图所示，找到【build】里面 assetsPublicPath: ‘/’ 这行代码，并将其改为 assetsPublicPath: ‘./’ （在斜杠前加点）。 注意：一定要改【build】里面的代码，不
SpringBoot+Vue+maven打成jar包部署服务器，不显示前端页面。
qq_51742972的博客
03-16 3369
springBoot+vue打jar包部署访问不到前端页面，只能调用后端接口
Docker 安装tomcat访问空白页问题解决办法
我是jjking`
02-01 1623
问题描述 安装docker之后，直接拉取阿里云的tomcat镜像，启动成功没有问题，但是访问地址的时候会出现这种情况 问题原因 直接拉取的tomcat镜像中有一个 webapps 和一个 webapps.dist 文件夹，我们正常的访问情况是 webapps 文件夹，但是，我们直接拉取的镜像里面是空的，什么都没有，所以访问结果就是 404 了 解决方案 将 webapps 删除，然后将 web...
vue项目页面空白的几个原因及解决办法
热门推荐
xin123____的博客
03-11 4万+
会出现vue项目页面空白，通常问题是在于路由上，可能是以下几种原因： 1.路由重复。 如果配置了两个路由是重复的，比如配置了两个【path: ‘/’】，那么访问就会看到空白页面，这时候改下重复的路由配置即可。 2.路由没有配置。 如果没有配置路由，那么访问的页面也可能是空白页，比如访问/yanggb，但是路由里却没有配置，这时候配置上丢失的路由配置即可。 3.路由配置指向页面为空白页。 这种情况就比较玄乎了，配置了指向的页面什么都没有，展示自然也是空白页。 总结 当然可能还会有别的原因导致vue项目出现空白
Vue项目打包部署后页面空白，无报错
Oliver尹的博客
06-07 7349
问题描述： 基于vue-cli 4.3.1的项目打包后，如果部署在域名的根路径下，页面显示正常，但是如果部署在域名的子路径下，打开页面后页面空白，无报错？ 原因： 归根结底是因为打开页面后没有匹配到任何一个路由，也就是设置在router里的路径没有任何一个被匹配到，包括其中设置的path:"/"这个路径，因此也就无法加载对应的组件，所以显示一片空白； 官网原文：vue-router默认使用的是hash模式，如果要改成history模式，需要在router中将模式改成history，也就是 const rou
vite vue3项目打包部署空白页面问题的处理
Ct130429的博客
04-04 4607
vite vue3项目打包部署上线后，发现是空白页面问题的处理
记录Vue问题： Vue cli3创建项目，打包后放到线上，显示为空白页面
weixin_40785343的博客
05-08 1451
记录Vue问题： Vue cli3创建项目，打包后放到线上，显示为空白页面 我们能看到，其实页面上的css,js文件已经加载成功，但是路由没有执行 经过网上查阅 我在项目搭建时，使用的路由模式为history 那么使用history模式，如果创建的项目放到了根目录的话，不会出现这种问题。但一般情况下都不会放在根目录下，而是放在了子文件夹下面 那么遇到这种情况有两种解决办法 1 向后台询问子文件...
vue项目dist编译文件部署到服务器：页面空白、F5刷新报错404、403报错、等等bug - 总结篇
草巾冒小子的博客
03-11 7571
vue编译打包dist文件之后部署到线上服务器 ，访问页面却是空白！ 为什么？本地wampserver环境配置，确是正常的效果！ 404报错：Not Found （截图如下） 以上就是关于“　vue项目编译打包dist文件之后部署到服务器 - 无法访问页面　”　的全部内容。 ...
vue项目部署到apache服务器页面空白的问题
zhaoteeee
09-06 8242
vue项目部署到服务器页面空白的问题接触vue也有一段时间，正好公司有个手机端项目涉及到较多数据处理方面的问题，考虑了一下就打算用vue进行开发，前期也是各种顺利，只在兄弟组件间通信时使用bus.vue中转的时候出现第一次点击没有派发事件，考虑可能是点击元素派发使事件，又需点击确认按钮进行路由跳转出现的问题，不好解决该问题，所以使用vuex进行组件间数据通信，解决问题。一直到项目上线前都没有大问题出
vue项目部署到apache服务器刷新页面空白的问题
05-20
这个问题可能是由于路由配置不正确导致的。在 Vue.js 中使用路由时，如果要在 ...5. 重新启动 Apache 服务器，然后就可以访问 Vue.js 项目了。 如果还是遇到问题，可以检查浏览器的控制台输出，看看是否有错误信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值