Tomcat下部署vue項目[history模式]

1.項目發佈後通常有兩種訪問方式，

第一種： IP+端口直接訪問的方式，如 http://192.168.1.107:8080/
第二種：IP+端口+項目名，如 http://192.168.1.107:8080/saas/

2.第一種方式：ip+端口（前端後端修改）

範例：vue-cli項目使用路由，tomcat作爲服務器，項目文件夾名 saas

步驟：

1.修改配置文件 router.js

export default new Router({
  mode:'history', // 將mode值改爲history
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

2.1將tomcat下的ROOT文件中的內容替換(選擇其一)

（此種方式需要刪除ROOT文件夾下的全部內容，將打包的文件放進去，無需修改配置文件）
找到tomcat目錄，將tomcat->ROOT文件夾中文件全部刪除，將打包好的dist文件夾中的文件全部放到ROOT文件夾中。

2.2修改tomcat->conf/server.xml配置(選擇其一)

(此種方式無需刪除ROOT文件夾中的內容，只需修改serve.xml中的配置)
找到tomcat目錄，修改tomcat->conf/server.xml，增加Context節點。設置 docBase="/saas" 。其中的saas就是webapps目錄下的項目名稱（文件夾名）
**

3.第二種方式：ip+端口+項目名（前端修改）

範例：vue-cli項目使用路由，tomcat作爲服務器，項目文件夾名 saas

步驟：

1.首先創建WEB-INF文件，文件夾中創建web.xml文件：

因爲是history模式, 要防止在路由下刷新變成404錯誤，這需要讓tomcat都定位到首頁，也就是index.html頁，以往我們使用Java寫web項目部署在tomcat時，通常都會有一個WEB-INF文件夾，幷包含一個web.xml文件，而vue項目build之後只是純靜態資源項目，所以我們需要在build之後的dist文件夾裏新增一個WEB-INF文件夾，並新建web.xml文件。

在項目目錄下新建WEB-INF文件夾， 接着在WEB-INF文件夾下新建 web.xml文件，內容如下：

<?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>

2.修改配置文件 router.js

export default new Router({
  mode: 'history', // 開啓history模式需要後端配置404時返回/index.html
  base: '/saas/', //當項目不在根目錄時，必須添加子目錄路徑，否則空白頁面
  routes: [
    {path: "/home",  // '/saas/home'
      name: "home",
      component: home
    }]
	})

3.修改 config文件夾下的 index.js中配置

build: {
    // Template for index.html 
    index: path.resolve(__dirname, "../dist/index.html"),

    // Paths  
    assetsRoot: path.resolve(__dirname, "../dist"),//構建輸出目錄,也就是構建後的東西都扔這裏
    assetsSubDirectory: "static",//源子目錄 除了index.html，其餘的js img css都分在這裏
    
    /**添加開始**/
    //tomcat webapps/sass/
    assetsPublicPath: "/saas/", //需要加上這一行項目目錄,一個 / 表示根目錄
		/**添加結束**/
  }

4.webpack設置不打包文件WEB-INF

到此處已經可以成功配置一個 tomcat 服務下的vue 的 history 模式的項目，但是不能每次打包去手動添加和更改新建WEB-INF文件夾吧，遇到過設置不打包文件 WEB-INF 文件時的配置未生效，導致WEB-INF 下的 web.xml文件被打包成js 文件，導致當前路由刷新報 404 錯誤。
(這個錯誤找了 好久，以爲配置好了，就 Ok 了，由於代碼同步問題，沒注意可能就發生問題，所以上傳服務器前一定要記得檢查下WEB-INF文件夾是否存在 web.xml文件)

修改webpack.prod.conf.js配置

 plugins: [
   
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, "../static"),
        to: config.build.assetsSubDirectory,
        ignore: [".*"]
      },
      /**添加開始**/
      {
        from: path.resolve(__dirname, "../WEB-INF"), // 不打包直接輸出的文件
        to: "dist", // 打包後靜態文件放置位置
        ignore: [".*"] // 忽略規則。（這種寫法表示將該文件夾下的所有文件都複製）
      }
       /**添加結束**/
    ])
  ]

關於此處的的設置不打包問題可以自行搜索，關鍵詞：webpack 設置不打包文件

5.到此處前端已經成功配置了tomcat 下 vue 的 history模式

項目最終目錄如下圖

6.注意vue-cli 3.x vue-cli打包配置還需要設置以下內容：

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

4.結語

終於完成了，也是踩了不少坑和加上一些搜索，感覺目前給的文檔都不太詳細，所以自己寫了一篇關於 tomcat 下的 vue的 history 模式，希望能幫到大家，歡迎大家一起交流。