vue-cli，history 與 tomcat服務器，刷新404，請求資源404，解決辦法

前文：CSDN也發布了相同文章，https://blog.csdn.net/qq_41797950/article/details/104373743。

問題：
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>
————————————————
版權聲明：本文為CSDN博主「杜明鳴」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_41797950/article/details/104373743

 

 

 

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，再刷新，請求路徑就好了

 

 

 

 有互相學習交流經驗的，上海交朋友的，可以加q: 875056587