公司前端寫的后台部署到tomcat webapps目錄下后，無法進行刷新，一刷新就會報錯404，自動跳的404頁面。在網上查了下，官方說是HTML5 History 模式引發的問題，但是解決方案中，並沒有tomcat的解決方案。如鏈接：https://router.vuejs.org/zh-cn/essentials/history-mode.html
於是，我百度了下，找到了解決方案！
一.vue創建項目使用腳手架有兩種方式
1.vue init webpack my
這種方式的項目打包，需要找到config/index.js文件將build中的assetsPublicPath: '/',修改成 assetsPublicPath: './'，
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
然后執行npm run build,會在根目錄下生成dist文件夾,將dist下的文件扔到你的tomcat的webapps文件夾的項目下即可。
2.vue init webpack-simple my
這種情況下的項目沒有config，這時候就不需要配置1中的index.js文件了，直接執行npm run build ,同樣會生成dist文件夾，但是這種情況下dist下面沒有index.js ，所以需要你手動將dist下的文件個index.js文件，一同復制到tomcat的webapps項目下，也會有1中的效果。
如果沒有意外，這時候項目應該可以訪問了，但是當你選擇單頁面路由的時候，再刷新頁面會出現404，這種情況肯定是要修復的，這時候就需要在tocmat的webapps下的項目中創建WEB-INF文件夾，在文件夾中創建文件web.xml。如：
[root@ranyehudong-devops01 sykmanagement]# ls
favicon.ico index.html logo.ico sykmanagement WEB-INF [root@ranyehudong-devops01 sykmanagement]# pwd /usr/local/tomcat8/webapps/sykmanagement [root@ranyehudong-devops01 sykmanagement]# cd WEB-INF/ [root@ranyehudong-devops01 WEB-INF]# ls web.xml [root@ranyehudong-devops01 WEB-INF]# cat web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1" metadata-complete="true"> <display-name>Router for Tomcat</display-name> <error-page> <error-code>404</error-code> <location>/index.html</location> </error-page> </web-app> [root@ranyehudong-devops01 WEB-INF]# pwd /usr/local/tomcat8/webapps/sykmanagement/WEB-INF
然后，前端還需要配置下route，配置一個覆蓋所有的路由情況，然后在給出一個 404 頁面。
代碼如下：
const router = new VueRouter({
mode: 'history', routes: [ { path: '*', component: (resolve) => require(['./views/error404.vue'], resolve) } ] })
然后重新啟動tomcat，刷新頁面，404報錯的問題就解決了！