国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue應(yīng)用部署到服務(wù)器的正確方式

xcc3641 / 705人閱讀

Vue應(yīng)用部署到服務(wù)器的正確方式

很多時(shí)候我們發(fā)現(xiàn)辛辛苦苦寫的VueJs應(yīng)用經(jīng)過(guò)打包后在自己本地搭建的服務(wù)器上測(cè)試沒(méi)有什么問(wèn)題，但真正放在服務(wù)器上后，會(huì)發(fā)現(xiàn)或多或少的問(wèn)題，比如：頁(yè)面出現(xiàn)空白現(xiàn)象，獲取資源路徑不對(duì)等，我相信以VueJs為技術(shù)棧來(lái)進(jìn)行前端開(kāi)發(fā)的小伙伴或多或少都會(huì)遇到這樣的問(wèn)題，我也遇到過(guò)，那現(xiàn)在我們就來(lái)一一解決這樣的問(wèn)題。

如何打包

基于Vue-Cli,通過(guò)npm run build來(lái)進(jìn)行打包的操作

如何部署

將打包出來(lái)的資源，基于Vue-Cli的一般是dist目錄下有static目錄和index.html文件，可以直接將這兩個(gè)文件扔到服務(wù)端

但有時(shí)候，我們會(huì)直接將dist文件扔到服務(wù)端

出現(xiàn)的問(wèn)題

打包到服務(wù)器后，出現(xiàn)資源引用路徑的問(wèn)題

打包到服務(wù)器后，出現(xiàn)空白頁(yè)的問(wèn)題

打包到服務(wù)器后，出現(xiàn)引入的css的type被攔截轉(zhuǎn)換為"text/plain"問(wèn)題

打包到服務(wù)器后，出現(xiàn)路由刷新404的問(wèn)題

出現(xiàn)資源引用路徑的解決方案

一般這個(gè)問(wèn)題是由于在webpack配置打包發(fā)布的目錄造成的。

情況一.如果是將static與index.html直接放在服務(wù)器根目錄,也就是說(shuō)，當(dāng)前的應(yīng)用訪問(wèn)的網(wǎng)址如:http://www.xxx.com

解決辦法：

    配置輸出的publiPath:"/"或者"./"

情況二.直接將打包后的dist文件放在了服務(wù)器的根目錄，也就是如果需要訪問(wèn)當(dāng)前的應(yīng)用，訪問(wèn)的網(wǎng)址如:http://www.xxx.com/dist

解決辦法：

首先需要在創(chuàng)建路由實(shí)例中增加：
const router = new VueRouter({
mode: "history",
base: "/mobile/",
scorllBehavior: () => ({

y: 0

}),
routes
});
然后再打包發(fā)布目錄:
publiPath:"/dist/"或者"http://www.xxx.com/dist/"

出現(xiàn)由于路由的history模式下刷新當(dāng)前路由出現(xiàn)404的問(wèn)題

今天做的應(yīng)用發(fā)布到服務(wù)器上，發(fā)現(xiàn)當(dāng)刷新當(dāng)前路由的時(shí)候，就會(huì)出現(xiàn)404的狀況，其實(shí)這是
因?yàn)楫?dāng)刷新當(dāng)前頁(yè)面時(shí)候，所需要訪問(wèn)的資源在服務(wù)器上找不到，也就是說(shuō)，我們?cè)赩ueJs開(kāi)發(fā)應(yīng)用的過(guò)程中，設(shè)置路由的路徑不是真實(shí)存在的路徑，并且使用了history模式。

解決辦法

需要后端進(jìn)行配合,參考https://router.vuejs.org/en/essentials/history-mode.html

出現(xiàn)引入的css的type被攔截轉(zhuǎn)換為"text/plain"問(wèn)題

這是我開(kāi)發(fā)過(guò)程中遇到的感覺(jué)很奇葩的問(wèn)題，我們都知道，一般基于Vue-Cli，通過(guò)WebPack打包后的資源不需要更改什么。可是我發(fā)現(xiàn)，當(dāng)我把代碼進(jìn)行上傳后，輸入網(wǎng)址，看見(jiàn)的頁(yè)面把我嚇壞了，發(fā)現(xiàn)所有樣式不存在了，第一反應(yīng)就是認(rèn)為是自己在進(jìn)行打包配置過(guò)程中出現(xiàn)了什么問(wèn)題，然后通過(guò)fillder進(jìn)行調(diào)試，發(fā)現(xiàn)css文件是正確獲取到的

可以看到，這個(gè)css文件的type被攔截轉(zhuǎn)換為"text/plain"，這時(shí)候，我又把相關(guān)的配置文件看了兩遍，后面發(fā)現(xiàn)，真的是日了狗了，讓我哭一會(huì)兒。先上圖

我擦，原來(lái)是服務(wù)器端返回的類型居然是"text/plain"。這個(gè)問(wèn)題很好解決，把這圖直接給后端，是不是感覺(jué)被坑了/(ㄒoㄒ)/~~。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/83999.html

相關(guān)文章

  • 網(wǎng)站子目錄部署VUE webpack 打包資源文件路徑的正確引用方式

    摘要：是目前使用最為火熱的打包工具，各大知名的框架類庫(kù)都用其打包，國(guó)內(nèi)使用最近也火熱起來(lái)。但是坑也很多，比如說(shuō)圖片，字體等文件的路徑。 webpack 是目前使用最為火熱的打包工具，各大知名的框架類庫(kù)都用其打包，國(guó)內(nèi)使用最近也火熱起來(lái)。它在單頁(yè)應(yīng)用和類庫(kù)打包上幫助許多人從代碼管理中解脫了出來(lái)，成為了當(dāng)下風(fēng)靡一時(shí)的打包工具。 但是坑也很多，比如說(shuō)圖片，字體等文件的路徑。 剛開(kāi)始用webpack...

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

  • vue開(kāi)發(fā)項(xiàng)目完全指南

    摘要：有兩種方法，一種是在開(kāi)發(fā)環(huán)境中設(shè)置通過(guò)的，另一種是在服務(wù)器上修改的配置設(shè)置。這樣我們以后使用訪問(wèn)接口就可以不加了，打包后訪問(wèn)也不用手動(dòng)去除統(tǒng)一管理在項(xiàng)目開(kāi)發(fā)過(guò)程中，會(huì)涉及到很多接口的處理，當(dāng)項(xiàng)目足夠大時(shí)，就需要統(tǒng)一管理接口。 這篇文章總結(jié)了vue項(xiàng)目的所遇到的問(wèn)題，包括跨域、用戶認(rèn)證、接口統(tǒng)一管理、路由配置、兼容性處理，性能優(yōu)化等內(nèi)容。 項(xiàng)目github地址 : 前端 https:...

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

  • （小白指南）在 Linux 服務(wù)器上安裝 Nodejs、Nginx 以及部署 Web 應(yīng)用

    摘要：首先，的命令和并不能在全局使用。文章有意將瀏覽器不能訪問(wèn)服務(wù)器的兩個(gè)問(wèn)題寫出來(lái)，是因?yàn)樽髡咴谂挪閱?wèn)題的時(shí)候，發(fā)現(xiàn)在服務(wù)器直接訪問(wèn)的頁(yè)面，能很好地檢查排除問(wèn)題在百度尋找問(wèn)題答案的時(shí)候，發(fā)現(xiàn)這種做法也得到了不少人的肯定。 前段時(shí)間要把項(xiàng)目部署到服務(wù)器，期間踩了不少的坑。故寫下這篇文章，從零開(kāi)始把自己部署的過(guò)程都記錄下來(lái)，希望能給其他像我一樣的小白一點(diǎn)幫助。如果有疏漏的地方，請(qǐng)各位客官指出，...

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

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

0條評(píng)論

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