Tomcat 配置Vue  history模式

近日 , 在使用 Tomcat 部署Vue项目时 , 刷新项目出现404的异常 .

原因是 Vue使用了history模式 , 而tomcat没有相关配置

1.Vue项目添加文件夹 WEB-INF , 在此文件夹中添加文件: web.xml

2.web.xml文件内容如下:

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
version="3.0"
metadata-complete="true"> <display-name>webapp</display-name>
<description>
webapp
</description>
<error-page>
<error-code>404</error-code>
<location>/</location>
</error-page>
</web-app>

3.配置前端 , 在 route -->index.js配置中 修改配置

Tomcat 配置Vue history模式的更多相关文章

  1. vue路由的两种模式配置以及history模式下面后端如何配置

    vue路由的两种模式配置以及history模式下面后端如何配置 1.hash ——即地址栏URL中的#符号.hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变has ...

  2. vue history模式 ios微信分享坑

    vue history模式 ios微信分享坑 问题分析:因为苹果分享会是调取签名失败是因为:苹果在微信中浏览器机制和安卓不同,有IOS缓存问题,和IOS对单页面的优化问题,通俗点说安卓进行页面跳转分享 ...

  3. vue history 模式打包部署在域名的二级目录的配置指南

    最近在做项目,需要把项目部署在域名下的二级目录,并且是在用vue-router的history 模式. 我们都知道vue-router 的两种前端基本访问模式 hash 和history .hash ...

  4. vue history模式下出现空白页情况

    问题描述:   vue搭建的项目,路由一直用的hash模式,所以url中都会带有一个“#”号.现在想要去掉“#”,于是使用history模式 { mode: 'history' },代码如下: imp ...

  5. vue history模式 ios微信分享 踩过的坑

    背景:教育项目,整体依赖于微信环境,涉及到微信分享.微信二次分享 问题:vue使用history模式在iso微信下分享设置出错(签名认证错误.分享设置失败) 问题发现路径 1.按照微信公众号官方文档设 ...

  6. vue history模式 apache配置

    我的服务器apache 版本是2.4.6 看文档上面说加那些代码,但是加上去重启服务器就不能重启,显示代码错误,然后百度查开启mod_rewrite这个重写URL 弄了半天也不会,百度上面的不知道是不 ...

  7. Vue history模式支持ie9

    vue 路由里面的history能让浏览器显示平常一样的链接,可以去掉#这种,但是在ie9下面会强制变成hash,因为history不支持ie9自动降级,可能就会影响美感,解决:可以在路由里面添加fa ...

  8. vue : history模式与项目部署的爬坑

    需求:url不能有#符号,且不放在服务器虚拟主机的根目录. 假设放在虚拟主机的 medicine 文件夹下. 需要改两个文件,一个是 ./config/index.js (vue设置文件) ,另一个是 ...

  9. vue history模式

    注意: 1.前端:config.js路径问题 2.后台:配置nginx

随机推荐

  1. java中==和equals的不同使用方法

    System.out.println("input a charact a      "); Scanner input2 = new Scanner(System.in); St ...

  2. CSP-S 2020 题解

    赛后我重拳出击,赛场上我却爆零.哎. 题解本人口胡.有错请各位大佬们指出. A. 儒略日 这题是大型模拟题. 介绍两种写法:一种代码量致死(赛 场 自 闭),一种是非常好写的. 写法 1 我在赛场的思 ...

  3. 题解 CF1437G Death DBMS

    这题感觉不是很难,但是既然放在 \(\texttt{EDU}\) 的 \(\texttt{G}\) 题,那么还是写写题解吧. \(\texttt{Solution}\) 首先看到 "子串&q ...

  4. MySQL和sparkSQL合并行

    表A 表B 从表A到表B MySQL 写法:select name, group_concat(score seperate ';') as score from A group by name sp ...

  5. Vue开发中的移动端适配(px转换成vw)

    1.项目根目录下,创建 .postcssrc.js 文件. 2.安装插件. -D (开发依赖) postcss-import postcss-url cssnano-preset-advanced - ...

  6. Json处理方式记录

    1.可以直接使用Parse方法 JObject jObject = JObject.Parse(res); string mediaId = jObject["media_id"] ...

  7. VS调试相关

    1.查看DataSet的数据

  8. 2020-2021 “Orz Panda” Cup Programming Contest

    2020-2021 "Orz Panda" Cup Programming Contest 比赛情况 我们一共过了道3题 本场贡献:et3_tsy :过了A,提供了H的关键修改 ​ ...

  9. 【Electron Playground】Electron 窗口问题汇总

    作者:Kurosaki 本节旨在汇总在开发Electron 窗口可能遇到的问题,做一个汇总,后续遇到问题会持续更新. 1. 窗口闪烁问题. const { BrowserWindow } = requ ...

  10. antdv的Upload组件实现前端压缩图片并自定义上传功能

    Ant Design of Vue的Upload组件有几个重要的api属性: beforeUpload: 上传文件之前的钩子函数,支持返回一个Promise对象. customRequest: 覆盖组 ...