每個月一次的技術文檔是一個總結的過程，今天就來講講我最近遇到的vue項目打包部署到服務端的注意事項及步驟。
1我們用vue-cli腳手架建一個項目之后，在本地測試都沒有問題，但是直接用npm run build打包，訪問基本都是有問題，比如：頁面出現空白現象，獲取資源路徑不對等，我相信以VueJs為技術棧來進行前端開發的小伙伴或多或少都會遇到這樣的問題，我也遇到過，那現在我們就來一一解決這樣的問題。
出現的問題：
打包到服務器后，出現資源引用路徑的問題
打包到服務器后，出現空白頁的問題
打包到服務器后，出現引入的css的type被攔截轉換為"text/plain"問題
打包到服務器后，出現路由刷新404的問題
此時我們需要以下幾步
1配置服務端地址
有一個很尷尬的問題就是config/prod.env.js目錄中要配置服務端的地址，我在網上搜了很多都沒有提到這一步，我只配置了dev.env.js中的地址BASE_API:'"http://192.168.1.144:8081"'，之前一直讀取的是本地的開發環境，我一直在想從哪里獲取呢，后來在prod.env.js配置后發現會打包后會自動讀取路徑。
這兩個文件有什么不同呢？Dev.env.js是本地開發環境中會調用的服務端配置地址，但是prod.env.js是打包時會自動讀取里面的服務端地址，先知道了有什么不同，才會了解為什么在這里面配置
2修改config下index.js的配置
修改build:{}中內容，assetsPublicPath: '/ywyun/',// '/' '
首先build是打包時會讀取的模塊，該這里是打包時會自動加一個文件夾名為ywyun,因為我們打包后悔變成index.html和dist文件夾，這兩個東西部署的時候肯定是要放在一個文件夾內，至於這個文件夾文字是什么，根據你們自己的項目名字或者路徑來定義。
這個解決的是出現資源引用路徑的問題。
3出現由於前面項目加了個基目錄，ywyn,訪問出現404的問題
今天做的應用發布到服務器上，發現當刷新當前路由的時候，就會出現404的狀況，其實這是因為當刷新當前頁面時候，所需要訪問的資源在服務器上找不到，也就是說，我們在Vue發應用的過程中，設置路由的路徑不是真實存在的路徑，並且使用了history模式。解決方案是在router/index.js下加一個base路徑，因為在部署的時候有一個文件夾，這個文件夾相當於一個基目錄，路由沒有這一層的話會報錯，
export default new Router({
mode: 'history',
base:'/ywyun/',
routes: constantRourerMap
})
4頁面刷新時出現404問題
此時訪問頁面應該基本的都可以跳轉，但是刷新的時候突然發現報了404，這個在網上查找了一下，原來是HTML5 History 模式引發的問題，具體為什么，vue官方已經給出了解釋
根據官方給出的解決方案原理
你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。
所以在tomcat服務器下你可以這么做。在打包好的項目根目錄下新建一個WEB-INF文件夾，在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>
</error-page>
</web-app>
這樣的目的就是一旦出現404就返回到 index.html 頁面。
以上所述是給大家介紹的Vue項目webpack打包部署到Tomcat或者阿里雲服務器遇到的一系列問題，基本上這幾個點改了，在本地用tomcat試一下，然后可以直接上傳到阿里雲上部署測試了。