使用vue-cli打包后部署Tomcat后路径不对或者页面全部无法显示

古城微笑少年丶 2023-06-24 10:29 13阅读 0赞

使用vue-cli npm run build 后 部署在Tomcat 8.0

**1. 图片，css，js路径不对**  
![在这里插入图片描述][20191222210121564.png]  
点击config文件夹下的index.js  
![在这里插入图片描述][20191222210404345.png]  
改46行assetsPublicPath: ‘/’,

assetsPublicPath: './',

然后重新打包

--------------------

**2. 整个页面全部无法显示，css和js路径没有错误**  
![在这里插入图片描述][20191222210825515.png]

进入router文件夹下的index.js  
![在这里插入图片描述][20191222210933503.png]  
删除mode  
![在这里插入图片描述][20191222210956712.png]

--------------------

**3.图片，css，js路径不对，改46行assetsPublicPath: ‘./’,还是没有用**

把打包好的static放到Tomcat的webapp文件夹下

![在这里插入图片描述][20191222211141480.png]

static文件夹本来一起在webapps\\ROOT  
![在这里插入图片描述][20191222211609633.png]  
改成webapps下放static，index.html在原来的webapps\\ROOT 中

[20191222210121564.png]: https://img-blog.csdnimg.cn/20191222210121564.png
[20191222210404345.png]: https://img-blog.csdnimg.cn/20191222210404345.png
[20191222210825515.png]: https://img-blog.csdnimg.cn/20191222210825515.png
[20191222210933503.png]: https://img-blog.csdnimg.cn/20191222210933503.png
[20191222210956712.png]: https://img-blog.csdnimg.cn/20191222210956712.png
[20191222211141480.png]: https://img-blog.csdnimg.cn/20191222211141480.png
[20191222211609633.png]: https://img-blog.csdnimg.cn/20191222211609633.png

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue打包后图片不显示问题

天给登录页面加了一个背景图，结果部署到服务器上后，发现图片不见了！！我本地是这样： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5...

旧城等待，/ 2024年04月18日 12:08/ 0 赞/ 113 阅读

相关使用vue-cli打包后部署Tomcat后路径不对或者页面全部无法显示

使用vue-cli npm run build 后部署在Tomcat 8.0 1. 图片，css，js路径不对 ![在这里插入图片描述][201912222101215

古城微笑少年丶/ 2023年06月24日 10:29/ 0 赞/ 14 阅读

相关 vue使用webPack打包发布后页面显示空白

今天笔者将打包后，进行访问，访问到index.html，但是出现的是空白页。打包命令：npm run build，打包后的文件如下： ![在这里插入图片描述][2019

阳光穿透心脏的1/2处/ 2023年05月31日 02:54/ 0 赞/ 15 阅读

相关 Tomcat 部署后文件无法下载

1、如果文件是中文名，则去tomcat server.xml文件中加上 URIEncoding="UTF-8" 即 <Connector port="8080" redir

朴灿烈づ我的快乐病毒、/ 2023年03月13日 11:52/ 0 赞/ 18 阅读

相关 VUE_vuecli如何打包部署

前端打包 npm run build 打包的发布的代码相当于执行的package.json里面的vue-cli-service build

超、凢脫俗/ 2023年03月04日 08:11/ 0 赞/ 47 阅读

相关 Vue项目配置打包后，部署后Proxy不生效

Vue代理在Vue项目中配置了代理，但是部署之后不生效，并且报404；这是因为Vue配置的代理仅在本地开发下有效；部署之后，需要：在nginx中进行配

朴灿烈づ我的快乐病毒、/ 2022年12月19日 06:03/ 0 赞/ 231 阅读

相关 uni-app打包后iconfont无法显示解决办法

在cdn前面加上 https: 即可: ![在这里插入图片描述][20210702125317113.png] [20210702125317113.png]: /ima

短命女/ 2022年10月12日 01:16/ 0 赞/ 659 阅读

相关 vuecli4中配置打包使用相对路径

元气满满，直接干！使用vuecli4进行项目打包时，默认使用的是根目录的方式，这样打包直接项目直接运行就是一个大白屏，非常难受！这时我们就需要在设置打包使用相对目录的方

╰半橙微兮°/ 2022年09月02日 00:44/ 0 赞/ 347 阅读

相关 linux安装jdk后启动tomcat无法访问启动后tomcat中的静态页面

昨天买了一台阿里云的轻量级服务器，在上面安装了jdk环境后，放入tomcat启动，结果再怎么也访问不了tomcat上面的静态页面，后来多方求证，原因是linu

深碍√TFBOYSˉ_/ 2022年05月31日 01:28/ 0 赞/ 315 阅读

相关 JSP在tomcat项目中部署后无法显示CSS和图片

JSP在tomcat项目中部署后无法显示CSS和图片在java web 项目中用myeclipe自带浏览器浏览该JSP是可以正常显示图片和CSS的，将代码复制出来变成h

系统管理员/ 2021年09月26日 05:58/ 0 赞/ 750 阅读