成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue項(xiàng)目部署遇到的問題及解決方案

姘擱『 / 530人閱讀

摘要:模式部署沒有什么問題,只要訪問到服務(wù)器上的,就可以訪問網(wǎng)站了。問題起因在做年度賬單項(xiàng)目的時(shí)候,項(xiàng)目部署的時(shí)候,用的是模式。這樣幾項(xiàng)配置后,就可以在子目錄下訪問網(wǎng)站,刷新也沒有問題。

寫在前面

Vue-Router 有兩種模式,默認(rèn)是 hash 模式,另外一種是 history 模式。

hash:也就是地址欄里的 # 符號(hào)。比如 http://www.example/#/hello,hash 的值為 #/hello。特點(diǎn):hash 雖然出現(xiàn) URL 中,但不會(huì)被包含在 HTTP 請(qǐng)求中,對(duì)后端不會(huì)產(chǎn)生什么影響,改變 URL 不會(huì)重載頁面。

history:利用了 HTML5 History Interface 中新增的 pushState()replaceState() 方法,來完成 URL 跳轉(zhuǎn)而無須重新加載頁面。(需要特定瀏覽器支持)

hash 和 history 兩種模式都是基于瀏覽器自身的屬性,vue-router 只是利用了這兩個(gè)特性(底層還是瀏覽器提供的接口)來實(shí)現(xiàn)前端路由。

使用場景

一般來說,兩種模式都是可以的。除非在意不太漂亮的 #,只能選擇 history。

這兩種模式在開發(fā)環(huán)境下都沒有什么太大的問題,但是當(dāng)部署到生產(chǎn)環(huán)境中后,兩者有所不同。

hash 模式部署沒有什么問題,只要訪問到服務(wù)器上的 index.html,就可以訪問網(wǎng)站了。
history 模式下,前端的 URL 必須和實(shí)際向后端發(fā)起請(qǐng)求的 URL 一致,如 http://www.example.com/user/id。如果后端缺少對(duì) /user/id 的路由處理,將返回 404 錯(cuò)誤。

不過這種模式要玩好,還需要后臺(tái)配置支持……所以呢,你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源:如果 URL 匹配不到任何靜態(tài)資源,則應(yīng)該返回同一個(gè) index.html 頁面,這個(gè)頁面就是你 app 依賴的頁面。- Vue-Router
問題起因

在做「年度賬單」項(xiàng)目的時(shí)候,項(xiàng)目部署的時(shí)候,用的是 hash 模式。APP安卓端分享出去的鏈接對(duì)于 # 做了特殊處理,encode 轉(zhuǎn)義成了 %23,所以路由只能換成 history 的模式。

因此,現(xiàn)把解決的思路總結(jié)下,雖然 官網(wǎng) 上給出了解決方案,但在實(shí)際的編碼中也遇到了一些問題。

根目錄下

當(dāng)項(xiàng)目在根目錄下部署的時(shí)候(如 http://www.example.com/),vue 的相關(guān)文件默認(rèn)不需要修改,修改的是后端,這里以 nginx 為例。

location / {
  try_files $uri $uri/ /index.html;
}

$uri 就是訪問的 url,不包含 域名querystring。例如 /test/hello 當(dāng)訪問 $uri 時(shí),如果存在,則訪問 $uri/, 不存在就訪問 /index.html 這樣配置好,訪問 http://example.com/ 時(shí)就可以訪問到網(wǎng)站了,進(jìn)入多級(jí)目錄后刷新頁面也不會(huì)存在問題。

子級(jí)目錄下

這里涉及到修改 vue 項(xiàng)目幾個(gè)配置文件。
先定義幾個(gè)環(huán)境

部署的域名:http://www.example.com:8080/

nginx 的 root 目錄:home/web/

vue 的部署路徑:home/web/h5-year-bill/

vue 項(xiàng)目的鏈接:http://www.example/h5-year-bill/

vue 項(xiàng)目的靜態(tài)資源路徑:http://www.example/h5-year-bill/static/

1. 打包后的靜態(tài)資源路徑需要修改

找到 build/config/index.js,代碼如下:

...
build: {
...
-    assetsPublicPath
     // 訪問路徑,修改成絕對(duì)路徑
+    assetsPublicPath: "/h5-year-bill/"
}

2. 路由文件
Vue-Router 有一個(gè) base 屬性, 傳送門

base
類型: string
默認(rèn)值: "/"
應(yīng)用的基路徑。例如,如果整個(gè)單頁應(yīng)用服務(wù)在 /app/ 下,然后 base 就應(yīng)該設(shè)為 "/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)修改已全部完成,項(xiàng)目也能夠正常訪問。

但還是會(huì)有一個(gè)問題,跳轉(zhuǎn)到某個(gè)路由后,刷新頁面,就會(huì)出現(xiàn)頁面空白,或者路由不通,此時(shí)就要修改 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)站目錄。

這樣幾項(xiàng)配置后,就可以在子目錄下訪問網(wǎng)站,刷新也沒有問題。

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/100913.html

相關(guān)文章

  • 阿里云ECS服務(wù)器部署node項(xiàng)目vue項(xiàng)目

    摘要:阿里云服務(wù)器部署項(xiàng)目和項(xiàng)目遇到的問題第三章申請(qǐng)阿里云服務(wù)器阿里云服務(wù)器地址第一次啥都不懂選的數(shù)據(jù)中心版位中文版不含。步驟輸入申請(qǐng)阿里云服務(wù)器時(shí)候創(chuàng)建的登錄名和登錄密碼,點(diǎn)擊鏈接。 阿里云ECS服務(wù)器部署node項(xiàng)目和vue項(xiàng)目遇到的問題(第三章) 申請(qǐng)阿里云ECS服務(wù)器阿里云服務(wù)器地址 showImg(https://segmentfault.com/img/bVbgeNh?w=9...

    dance 評(píng)論0 收藏0
  • 單頁應(yīng)用部署方案

    摘要:所以單頁應(yīng)用的部署,需要將所有的頁面請(qǐng)求都返回,瀏覽器下載了后會(huì)自動(dòng)解析并導(dǎo)航到對(duì)應(yīng)頁面。總結(jié)單頁應(yīng)用與以前的常規(guī)多頁面應(yīng)用還是有區(qū)別的,開發(fā)過程與后端解耦了,同時(shí)會(huì)出現(xiàn)跨域鑒權(quán)以及應(yīng)用部署的問題。 本文同步發(fā)布于我的個(gè)人博客上 - 單頁應(yīng)用的部署方案 本文主要簡單講一下單頁應(yīng)用的開發(fā)及部署方法,默認(rèn)你懂一些服務(wù)端知識(shí)及nginx知識(shí),如果有任何可以在下方評(píng)論留言。 單頁應(yīng)用 SPA(...

    yanbingyun1990 評(píng)論0 收藏0
  • 個(gè)人web商城網(wǎng)站

    摘要:于是在查找了大量資料,思考著技術(shù)選型,終于決定做一個(gè)展現(xiàn)商品的全棧網(wǎng)站。當(dāng)然這個(gè)網(wǎng)站還有許許多多需要完善并增加的功能,在此之后也會(huì)不斷去完善這個(gè)網(wǎng)站。所幸的是問題都已經(jīng)解決,項(xiàng)目也順利部署。 項(xiàng)目介紹 1、作為前端的菜鳥,每每看到Github上有很多大神分享著自己的項(xiàng)目時(shí),內(nèi)心都是蠢蠢欲動(dòng),這次終于下定決心要給自己一段時(shí)間來完成屬于自己的一份作品。2、于是在查找了大量資料,思考著技術(shù)選...

    quietin 評(píng)論0 收藏0
  • 個(gè)人web商城網(wǎng)站

    摘要:于是在查找了大量資料,思考著技術(shù)選型,終于決定做一個(gè)展現(xiàn)商品的全棧網(wǎng)站。當(dāng)然這個(gè)網(wǎng)站還有許許多多需要完善并增加的功能,在此之后也會(huì)不斷去完善這個(gè)網(wǎng)站。所幸的是問題都已經(jīng)解決,項(xiàng)目也順利部署。 項(xiàng)目介紹 1、作為前端的菜鳥,每每看到Github上有很多大神分享著自己的項(xiàng)目時(shí),內(nèi)心都是蠢蠢欲動(dòng),這次終于下定決心要給自己一段時(shí)間來完成屬于自己的一份作品。2、于是在查找了大量資料,思考著技術(shù)選...

    pingink 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<