前一段時(shí)間已脓，后端的同學(xué)使用openresty來搭建web 服務(wù)掸犬，然后在項(xiàng)目部署的時(shí)候遇到了些問題袜漩，記錄下。
1湾碎、css加載不出來的問題
訪問頁面時(shí)宙攻，html頁面加載出來后，樣式卻沒有加載出來介褥。在chrome的network查看css文件加載正常座掘。網(wǎng)上搜索了下，是css的Content-Type設(shè)置問題柔滔。正常下情況下應(yīng)該為text/css溢陪，而此處是text/plain。
找到ngnix配置文件睛廊，在http{}中添加兩行設(shè)置：
include /etc/nginx/mime.types;
default_type application/octet-stream;
然后重啟下openresty即可（重啟命令：openresty -s reload）形真。
疑問：這兩行代碼分別代表什么含義？第一行超全，好像是指定MIME-types配置文件没酣，第二行好像是說明默認(rèn)下載這個(gè)文件？
補(bǔ)充：
MIME-types和Content-Type
web服務(wù)器收到靜態(tài)資源文件的請(qǐng)求時(shí)卵迂，在文件配置中找到對(duì)應(yīng)的MIME-types裕便，然后設(shè)置響應(yīng)的Content-Type，告訴瀏覽器實(shí)際返回文件的內(nèi)容類型见咒。瀏覽器根據(jù)Content-Type值對(duì)文件進(jìn)行不同的處理方式偿衰。
2、vue-router在history模式下刷新404
vue-router有兩種模式改览，即hash和history模式下翎。
hash模式下url中包含#，瀏覽器向服務(wù)器請(qǐng)求時(shí)會(huì)自動(dòng)忽略#后面的值宝当，不同路由下其#前面的url是一樣的视事，所以刷新時(shí)都會(huì)指向index.html。history模式下url就像正常的url庆揩，但是由于是單頁面應(yīng)用俐东，如果后端不做處理的話跌穗，在不同的路由下是找不到對(duì)應(yīng)的頁面的，這個(gè)時(shí)候就會(huì)報(bào)錯(cuò)404虏辫。
后端需要做的即是增加一個(gè)覆蓋所有情況的候選資源：當(dāng)url匹配不到任何靜態(tài)資源蚌吸，則應(yīng)該返回同一個(gè)index.html頁面。
vue-router官方ngnix配置如下：
location / {
try_files $uri $uri/ /index.html;
}
3砌庄、同一域名下部署兩個(gè)vue項(xiàng)目
因?yàn)楫?dāng)時(shí)整個(gè)平臺(tái)是分兩個(gè)項(xiàng)目a和b分別開發(fā)的羹唠，當(dāng)部署的話，是需要兩個(gè)項(xiàng)目部署到一起的娄昆，同時(shí)兩個(gè)項(xiàng)目頁面間可以正常的相互跳轉(zhuǎn)佩微。
將a項(xiàng)目的靜態(tài)文件放在根目錄下，b項(xiàng)目的靜態(tài)文件先放到文件夾view中萌焰，期望直接訪問url地址如：http://127.0.0.1:8080時(shí)哺眯，請(qǐng)求的index.html是根目錄下a項(xiàng)目的index.html文件，而訪問http://127.0.0.1:8080/view/時(shí)杆怕，請(qǐng)求的index.html是view文件下b項(xiàng)目的index.html文件。
在ngnix的server下增加配置如下：
location /view {
try_files $uri $uri/ /view/index.html;
}
這樣訪問不同的路徑壳贪，即可訪問到對(duì)應(yīng)的項(xiàng)目陵珍。
另外，由于是兩個(gè)單頁應(yīng)用應(yīng)用违施，項(xiàng)目間跳轉(zhuǎn)實(shí)際上是兩個(gè)頁面跳轉(zhuǎn)互纯，需要使用原生的location來進(jìn)行頁面間跳轉(zhuǎn)。
如在b項(xiàng)目中設(shè)置跳轉(zhuǎn)到a項(xiàng)目的url統(tǒng)一加上前綴/toa（當(dāng)然這個(gè)前綴只是用于區(qū)分是否要跳轉(zhuǎn)到a項(xiàng)目）磕蒲，然后在main.js設(shè)置路由鉤子函數(shù)留潦，針對(duì)不同路徑進(jìn)行不同的跳轉(zhuǎn)操作：
router.beforeEach((to, from, next) => {
if (to.path.substr(0, 4) == '/toa') {
window.location.pathname = to.path.replace('/toa', ''); //如果是跳轉(zhuǎn)到a項(xiàng)目，則更改location
} else {
next(); //若不是辣往，則繼續(xù)b項(xiàng)目內(nèi)路由跳轉(zhuǎn)
}
})
問題：項(xiàng)目內(nèi)跳轉(zhuǎn)是路由跳轉(zhuǎn)兔院，頁面不會(huì)刷新，而兩個(gè)項(xiàng)目間跳轉(zhuǎn)站削，會(huì)有刷新情況出現(xiàn)坊萝。
