在tomcat中設置history模式,使vue-router使用history模式

vue-router文檔中只有關於Apache,nginx等配置的說明,同過查詢找到了以下方法解決tomcat下history模式的問題。創建WEB-INF文件,文件夾中創建web.xml
需要創建WEB-INF文件夾
在這裏插入圖片描述
在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>

按照這個配置完成後發現頁面還是空白的,經過研究發現我們還需要再vue-router中進行配置,因爲代碼是在mobile目錄下,路由進行以下配置。
路由配置
我使用的vue-cli 3.x vue-cli打包配置還需要設置以下內容:

module.exports = {
  publicPath: "/mobile",
  configureWebpack: {
    performance: {
      hints: false
    }
  }
};

這樣我們就實現tomcat下配置history模式了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章