在history模式下部署vue項目到tomcat服務器的踩坑經歷【前端VUE+後端JAVA】

前言

因爲是要將之前用jq寫的前端代碼重構爲基於vue下的項目，又是第一次將vue運用起來，所以真的可謂是一步一個坑，今天先記一波部署的坑。

vue項目源碼中的修改

router默認的模式是hash，但是由於他在地址欄中的地址會跟一個小尾巴，所以我在做項目的時候直接選擇不用這種模式，而是選擇了history。隨之而來的也是一系列相關的修改。

1. 在router.js中的修改：

 	const router = new Router({
    	mode: 'history',	//模式設置爲history
    	base: '/secops/nsoc/'	//這個必配，是index.html所在的路徑地址
    })

（此處修改確保打包之後，在服務器上運行時不會出現頁面空白的現象）

2. 對webpack的配置修改：
   1） vue-cli2下的修改：
   （這裏對於webpack.base.conf.js的修改，爲了保證路由跳轉的路徑正確性）
   （這裏對於index.js的修改，爲了保證所需靜態資源路徑）
   
   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, // 設置代理
    }
}

以上，就已經將vue項目源代碼中的配置配好了，接下來就是打包放在tomcat服務其中啦。

npm run build

項目打包後tomcat下的配置

打包後的項目需要放在webapps下面，這個就不用我多說了，由於我的項目需要一點點借鑑之前的項目來與後端結合，所以原有的配置我並沒有動。在tomcat中我們只需要修改WEB-INF文件夾中的web.xml文件就好了。

將這段代碼寫入web.xml文件中即可。

<web-app>
	<error-page>
		<error-code>404</error-code>
		<location>/nsoc/index.html</location>
	</error-page>
</web-app>

配置中注意的問題

1. 該文件中不要配置下面的代碼

	<welcome-file-list>
		<welcome-file>default.htm</welcome-file>
	</welcome-file-list>

因爲之前的項目是通過配置這個來確定首頁的顯示，如果他存在就不能跳轉到我們所需要的頁面了。

2. location中的路徑定要確定明白！
   因爲受到了router中base的配置影響，所以最一開始的時候我將location配置爲

<location>/secops/nsoc/index.html</location>

雖然從‘/’這個路由下進到了我們的項目當中，並且項目中的路由跳轉也是正常的，但卻出現了一個可怕的問題。當在地址欄中從‘/xxx’路徑下想進入到項目中的某一模塊時，頁面給我們報出了404的錯誤。並且在控制檯中，network下並沒有404的請求，console中也沒有錯誤報出。

開始以爲是前端代碼的問題，在網上搜索了很多也不見結果，最後請教了一位大神找到了根本問題。

實際上，在跳轉到’/xxx’的時候請求並沒有404，應該是命中了服務器的規則但是服務器上並沒有找到與之相對應的靜態資源。所以如果沒有404的請求，可以首先考慮一下是不是tomcat配置是否存在問題。

關於錯誤路徑可以訪問根路由的一點猜想：

在tomcat下，ip地址指向的應該是webapps這個目錄， 而tomcat將其設爲靜態網站目錄，所以10.xxx.xxx.xxx/secops/nsoc可以訪問到我放在secops/nsoc下的index.html文件，但是當跳轉10.xxx.xxx.xxx/secops/nsoc/xxx時，這個目錄在文件結構上不存在，所以就應該是404的錯誤，走到web.xml的404配置中。

只不過web.xml時在secops目錄中的，location裏的‘/’其實指的是secops。而我寫的‘/secops/nsoc/index.html’實際應該是‘secops/secops/nsoc’

所以走到404的配置裏發現配置的文件時不存在的，所以會拋出一個‘找不到網頁’的問題。

結尾

最後，經過不斷的調整，項目部署問題算是解決了，總結的有些囉嗦，但也將我最近踩的坑算是一 一填平了，希望可以對和我一樣剛剛起步的人有所幫助。

感謝看到這裏。如果有哪裏寫的有問題，希望來糾正。