vue-cli,history 与 tomcat服务器,刷新404,请求资源404,解决办法

问题
vue-cli,路由history,tomcat服务器,刷新404问题,刷新后请求资源路径不对。

配置
vue-cli:版本2.9.6
服务器:tomcat

注:仅是本项目的解决办法,可以参考,希望能帮到大家

1- config文件夹index.js,build下的 assetsPublicPath 改为 ‘/ec/’,名字根据项目自己定义
在这里插入图片描述
2- router文件夹下的index.Js, mode: ‘history’ , base: ‘/ec/’,与 assetsPublicPath 相同
在这里插入图片描述
3- static同级创建 WEB-INF/web.xml 文件夹,用来404时,重定回index.html页面

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee/web-app_2_5.xsd"
         id="scplatform" version="2.5">
  <display-name>/</display-name>
  <error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
  </error-page>
</web-app>

在这里插入图片描述
4. build/webpack.dev.conf.js 与 build/webpack.prod.conf.js下的 new CopyWebpackPlugin 里,添加:

   {
        from: path.resolve(__dirname, '../WEB-INF'),
        to: 'WEB-INF',
        ignore: ['.*']
    }

在这里插入图片描述
5. 网上很多教程都到这一步,然后项目正常启动,但是除了入口页面,其他页面刷新还是空白页面,打开F12,结果静态资源404报错,正确路径为 ec/static/css , 刷新后变为 ec/admin/static/css ,请求路径错误,404,所以页面空白
在这里插入图片描述
6. 更改 build/webpack.prod.conf.js 下的 output 下的 publicPath: “/ec/”,图片里写的第五步,是因为没算上报错的截图,问题不大,小细节,别在意,哈哈
在这里插入图片描述
7. 此时,打包,放到tomcat,再刷新,请求路径就好了
在这里插入图片描述
在这里插入图片描述
我的项目按照上面所有更改步骤,history路由去掉难看的#号后,刷新正常显示,谢谢大家

有互相学习交流经验的,上海交朋友的,可以加q: 875056587

  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值