一、Vue項目部署到nginx刷新報404：
#HTML5 History模式：
vue-router默認hash模式---使用URL的hash來模擬一個完整的URL，於是當URL改變時，頁面不會重新加載。
如果不想很丑的hash，我們可以使用路由的history模式，這種模式充分利用history.pushState API來完成URL跳轉而無需重新加載頁面。
修改為history模式在創建VueRouter實例前指定mode為history即可，如下圖：
當使用history模式后，URL就像正常的url，沒有像hash模式的#符號
這種模式還需要后台支持，因為我們的前端是個單頁客戶端應用，如果后台沒有正確配置，當用戶瀏覽時就會返回404。
所以，你要在服務端增加一個覆蓋所有情況的候選資源：如果URL匹配不到任何靜態資源，則因該返回同一個index.html，這個頁面就是你app依賴的頁面。
后端配置例子，修改nginx配置文件: 在location中指定try_files屬性，例：try_files $uri $uri/ /index.html;
配置完成之后，就能實現vue的刷新功能了。
附Nginx常用命令：
啟動 ./nginx 檢查 nginx.conf配置文件 ./nginx -t 重啟 ./nginx -s reload 停止 ./nginx -s stop
二、Vue項目部署到tomcat后顯示空白頁：
1.修改config/index.js文件
更改build下的assetsPublicPath: '/'為 ‘./’，注意是build下，不是dev下
module.exports = { dev: { ... }, build: { ... // 修改assetsPublicPath: '/', assetsPublicPath: './', ... } }
2.router/index.js
在路由表里設置訪問項目的根路徑，設置base屬性：
export default new Router({ routes: constantRouterMap, // mode: 'history', //后端支持可開 base:'/myvue/', //打包項目的根目錄 })
3.打包部署
dist文件夾里面的文件復制到tomcat/webapps/myvue，啟動服務，問題解決。
三、Vue項目部署到tomcat后圖標失效：
1、背景
vue使用elementUI組件庫在tomcat服務器部署后圖標不能正常顯示，如我遇到的下圖醬紫：
2、原因
通過查看 /build/webpack.base.conf.js 文件可以發現，woff 或 ttf 這些字體會經由 url-loader 處理后在 static/fonts 目錄下生成相應的文件。
也就是說實際應該通過 /static/fonts/** 路徑來獲取字體圖標，而實際我們通過調試窗口發現，卻是請求 /static/css/static/fonts/**，自然報錯誤。
3、解決方法
打開build/utils.js文件，加上 publicPath: '../../'，如下所示：
如果原始的代碼是
loaders.push(MiniCssExtractPlugin.loader)
則可以把這行代碼改為
/********************* 解決部署到tomcat之后圖標失效問題 *************************/ loaders.push({ loader:MiniCssExtractPlugin.loader, options: { publicPath: '../../' } }) /********************* *************************/
重新build，重新部署之后，恭喜你，可以正常顯示啦！！
四、Vue項目部署到tomcat后刷新報404：
遇到的問題：
使用webpack打包vue后，將打包好的文件，發布到Tomcat上，訪問成功，但是刷新后頁面報404錯。
在網上查找了一下，原來是HTML5 History 模式引發的問題，具體為什么，vue官方已經給出了解釋，你可以看https://router.vuejs.org/zh-cn/essentials/history-mode.html
但是看完問題又來了，官方給出的解決方案中沒有說tomcat下，怎么決解。
解決方案：
根據官方給出的解決方案原理
你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。
所以在tomcat服務器下你可以這么做。在打包好的項目根目錄下新建一個WEB-INF文件夾，在WEB-INF中寫一個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>kmap</display-name> <error-page> <error-code>404</error-code> <location>/index.html</location> </error-page> </web-app>
這樣的目的就是一旦出現404就返回到 index.html 頁面。
最后還需要配置一下你的route，配置一個覆蓋所有的路由情況，然后在給出一個 404 頁面。
const router = new VueRouter({ mode: 'history', routes: [ { path: '*', component: (resolve) => require(['./views/error404.vue'], resolve) } ] })
五、Vue項目部署到tomcat開啟history模式：
router默認的模式是hash，但是由於他在地址欄中的地址會跟一個小尾巴#，所以我在做項目的時候直接選擇不用這種模式，而是選擇了history。隨之而來的也是一系列相關的修改。
1、在router.js中開啟history模式的修改：
const router = new Router({ mode: 'history', //模式設置為history ... })
對webpack的配置修改：
1） vue-cli2下的修改：
將webpack.prod.conf.js中的output下的publicPath改為 /部署到tomcat中的文件名/
（這里對於webpack.base.conf.js的修改，為了保證路由跳轉的路徑正確性）
重新npm run build然后將打包好的項目部署到tomcat中就OK
2） vue-cli3下的修改：
由於vue-cli3相對於vue-cli2去掉了build和config文件夾，所以如果需要配置，我們需要自己創建一個vue.config.js文件來進行配置，該文件需要和package.json放在同一級別。
寫一些基本配置，其中publicPath是必寫的
module.exports = { publicPath: './',// 修改路徑，3.3起已經用publucPath代替了baseUrl assetsDir:'static', lintOnSave: true, // 在保存時校驗格式 productionSourceMap: false, // 生產環境是否生成 SourceMap devServer: { open: true, // 啟動服務后是否打開瀏覽器 host: '0.0.0.0', port: 8080, // 服務端口 https: false, hotOnly: false, proxy: null, // 設置代理 } }