vue打包 部署到TomCat刷新404解決方法

參考自：https://www.cnblogs.com/chenzhazha/p/10196590.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。如：

<?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> /*<location>/index.html</location>*/ 
</error-page> 
</web-app> 

 

 

然后，前端還需要配置下route，配置一個覆蓋所有的路由情況，然后在給出一個 404 頁面。

代碼如下：

const router = new VueRouter({
mode: 'history',
routes: [
　{ 
　　path: '*', 
　　component: (resolve) => require(['./views/error404.vue'], resolve) 
　 }
  ]
})

然后重新啟動tomcat，刷新頁面，404的問題就解決了！