資訊專欄INFORMATION COLUMN
摘要：模式部署沒有什么問題，只要訪問到服務器上的，就可以訪問網(wǎng)站了。問題起因在做年度賬單項目的時候，項目部署的時候，用的是模式。這樣幾項配置后，就可以在子目錄下訪問網(wǎng)站，刷新也沒有問題。
寫在前面
Vue-Router 有兩種模式，默認是 hash 模式，另外一種是 history 模式。
hash：也就是地址欄里的 # 符號。比如 http://www.example/#/hello，hash 的值為 #/hello。特點：hash 雖然出現(xiàn) URL 中，但不會被包含在 HTTP 請求中，對后端不會產(chǎn)生什么影響，改變 URL 不會重載頁面。
history：利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法，來完成 URL 跳轉(zhuǎn)而無須重新加載頁面。（需要特定瀏覽器支持）
hash 和 history 兩種模式都是基于瀏覽器自身的屬性，vue-router 只是利用了這兩個特性（底層還是瀏覽器提供的接口）來實現(xiàn)前端路由。
使用場景一般來說，兩種模式都是可以的。除非在意不太漂亮的 #，只能選擇 history。
這兩種模式在開發(fā)環(huán)境下都沒有什么太大的問題，但是當部署到生產(chǎn)環(huán)境中后，兩者有所不同。
hash 模式部署沒有什么問題，只要訪問到服務器上的 index.html，就可以訪問網(wǎng)站了。
history 模式下，前端的 URL 必須和實際向后端發(fā)起請求的 URL 一致，如 http://www.example.com/user/id。如果后端缺少對 /user/id 的路由處理，將返回 404 錯誤。
不過這種模式要玩好，還需要后臺配置支持……所以呢，你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。- Vue-Router問題起因
在做「年度賬單」項目的時候，項目部署的時候，用的是 hash 模式。APP安卓端分享出去的鏈接對于 # 做了特殊處理，encode 轉(zhuǎn)義成了 %23，所以路由只能換成 history 的模式。
因此，現(xiàn)把解決的思路總結(jié)下，雖然 官網(wǎng) 上給出了解決方案，但在實際的編碼中也遇到了一些問題。
根目錄下當項目在根目錄下部署的時候（如 http://www.example.com/）,vue 的相關(guān)文件默認不需要修改，修改的是后端，這里以 nginx 為例。
location / {
try_files $uri $uri/ /index.html;
}
$uri 就是訪問的 url，不包含 域名 和 querystring。例如 /test/hello 當訪問 $uri 時，如果存在，則訪問 $uri/, 不存在就訪問 /index.html 這樣配置好，訪問 http://example.com/ 時就可以訪問到網(wǎng)站了，進入多級目錄后刷新頁面也不會存在問題。
子級目錄下這里涉及到修改 vue 項目幾個配置文件。
先定義幾個環(huán)境
部署的域名：http://www.example.com:8080/
nginx 的 root 目錄：home/web/
vue 的部署路徑：home/web/h5-year-bill/
vue 項目的鏈接：http://www.example/h5-year-bill/
vue 項目的靜態(tài)資源路徑：http://www.example/h5-year-bill/static/
1. 打包后的靜態(tài)資源路徑需要修改
找到 build/config/index.js，代碼如下：
...
build: {
...
- assetsPublicPath
// 訪問路徑，修改成絕對路徑
+ assetsPublicPath: "/h5-year-bill/"
}
2. 路由文件
Vue-Router 有一個 base 屬性, 傳送門
base 類型: string 默認值: "/" 應用的基路徑。例如，如果整個單頁應用服務在 /app/ 下，然后 base 就應該設為 "/app/"
因此，找到 src/router/index.js，代碼如下：
// 不影響本地開發(fā)，兼容性做了處理
const isHistoryMode = process.env.NODE_ENV === "production" ? {
mode: "history",
base: "/h5-year-bill/"
} : {
mode: "hash"
};
const router = new Router({
...isHistoryMode,
routes
});
至此，打包配置的相關(guān)修改已全部完成，項目也能夠正常訪問。
但還是會有一個問題，跳轉(zhuǎn)到某個路由后，刷新頁面，就會出現(xiàn)頁面空白，或者路由不通，此時就要修改 nginx 的配置了。
3. nginx 配置相關(guān)修改
nginx部署路徑/conf/nginx.conf，修改如下：
#h5-year-bill
location ^~ /h5-year-bill {
root /home/web;
index index.html;
try_files $uri $uri/ /h5-year-bill/index.html last;
}
/h5-year-bill/ 就是部署的網(wǎng)站目錄。
這樣幾項配置后，就可以在子目錄下訪問網(wǎng)站，刷新也沒有問題。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/100913.html
摘要：阿里云服務器部署項目和項目遇到的問題第三章申請阿里云服務器阿里云服務器地址第一次啥都不懂選的數(shù)據(jù)中心版位中文版不含。步驟輸入申請阿里云服務器時候創(chuàng)建的登錄名和登錄密碼，點擊鏈接。 阿里云ECS服務器部署node項目和vue項目遇到的問題(第三章) 申請阿里云ECS服務器阿里云服務器地址 showImg(https://segmentfault.com/img/bVbgeNh?w=9...
摘要：所以單頁應用的部署，需要將所有的頁面請求都返回，瀏覽器下載了后會自動解析并導航到對應頁面?？偨Y(jié)單頁應用與以前的常規(guī)多頁面應用還是有區(qū)別的，開發(fā)過程與后端解耦了，同時會出現(xiàn)跨域鑒權(quán)以及應用部署的問題。 本文同步發(fā)布于我的個人博客上 - 單頁應用的部署方案 本文主要簡單講一下單頁應用的開發(fā)及部署方法，默認你懂一些服務端知識及nginx知識，如果有任何可以在下方評論留言。 單頁應用 SPA（...
摘要：于是在查找了大量資料，思考著技術(shù)選型，終于決定做一個展現(xiàn)商品的全棧網(wǎng)站。當然這個網(wǎng)站還有許許多多需要完善并增加的功能，在此之后也會不斷去完善這個網(wǎng)站。所幸的是問題都已經(jīng)解決，項目也順利部署。 項目介紹 1、作為前端的菜鳥，每每看到Github上有很多大神分享著自己的項目時，內(nèi)心都是蠢蠢欲動，這次終于下定決心要給自己一段時間來完成屬于自己的一份作品。2、于是在查找了大量資料，思考著技術(shù)選...
摘要：于是在查找了大量資料，思考著技術(shù)選型，終于決定做一個展現(xiàn)商品的全棧網(wǎng)站。當然這個網(wǎng)站還有許許多多需要完善并增加的功能，在此之后也會不斷去完善這個網(wǎng)站。所幸的是問題都已經(jīng)解決，項目也順利部署。 項目介紹 1、作為前端的菜鳥，每每看到Github上有很多大神分享著自己的項目時，內(nèi)心都是蠢蠢欲動，這次終于下定決心要給自己一段時間來完成屬于自己的一份作品。2、于是在查找了大量資料，思考著技術(shù)選...
閱讀 2954·2021-11-23 09:51
閱讀 3474·2021-11-22 09:34
閱讀 3376·2021-10-27 14:14
閱讀 1601·2019-08-30 15:55
閱讀 3408·2019-08-30 15:54
閱讀 1131·2019-08-30 15:52
閱讀 1945·2019-08-30 12:46
閱讀 2899·2019-08-29 16:11
