資訊專欄INFORMATION COLUMN
Vue應(yīng)用部署到服務(wù)器的正確方式
很多時候我們發(fā)現(xiàn)辛辛苦苦寫的VueJs應(yīng)用經(jīng)過打包后在自己本地搭建的服務(wù)器上測試沒有什么問題，但真正放在服務(wù)器上后，會發(fā)現(xiàn)或多或少的問題，比如：頁面出現(xiàn)空白現(xiàn)象，獲取資源路徑不對等，我相信以VueJs為技術(shù)棧來進行前端開發(fā)的小伙伴或多或少都會遇到這樣的問題，我也遇到過，那現(xiàn)在我們就來一一解決這樣的問題。
如何打包基于Vue-Cli,通過npm run build來進行打包的操作
如何部署將打包出來的資源，基于Vue-Cli的一般是dist目錄下有static目錄和index.html文件，可以直接將這兩個文件扔到服務(wù)端
但有時候，我們會直接將dist文件扔到服務(wù)端
出現(xiàn)的問題打包到服務(wù)器后，出現(xiàn)資源引用路徑的問題
打包到服務(wù)器后，出現(xiàn)空白頁的問題
打包到服務(wù)器后，出現(xiàn)引入的css的type被攔截轉(zhuǎn)換為"text/plain"問題
打包到服務(wù)器后，出現(xiàn)路由刷新404的問題
出現(xiàn)資源引用路徑的解決方案一般這個問題是由于在webpack配置打包發(fā)布的目錄造成的。
情況一.如果是將static與index.html直接放在服務(wù)器根目錄,也就是說，當(dāng)前的應(yīng)用訪問的網(wǎng)址如:http://www.xxx.com
解決辦法：
配置輸出的publiPath:"/"或者"./"
情況二.直接將打包后的dist文件放在了服務(wù)器的根目錄，也就是如果需要訪問當(dāng)前的應(yīng)用，訪問的網(wǎng)址如:http://www.xxx.com/dist
解決辦法：
首先需要在創(chuàng)建路由實例中增加：
const router = new VueRouter({
mode: "history",
base: "/mobile/",
scorllBehavior: () => ({
y: 0
}),
routes
});
然后再打包發(fā)布目錄:
publiPath:"/dist/"或者"http://www.xxx.com/dist/"
今天做的應(yīng)用發(fā)布到服務(wù)器上，發(fā)現(xiàn)當(dāng)刷新當(dāng)前路由的時候，就會出現(xiàn)404的狀況，其實這是
因為當(dāng)刷新當(dāng)前頁面時候，所需要訪問的資源在服務(wù)器上找不到，也就是說，我們在VueJs開發(fā)應(yīng)用的過程中，設(shè)置路由的路徑不是真實存在的路徑，并且使用了history模式。
解決辦法
需要后端進行配合,參考https://router.vuejs.org/en/essentials/history-mode.html
出現(xiàn)引入的css的type被攔截轉(zhuǎn)換為"text/plain"問題這是我開發(fā)過程中遇到的感覺很奇葩的問題，我們都知道，一般基于Vue-Cli，通過WebPack打包后的資源不需要更改什么?？墒俏野l(fā)現(xiàn)，當(dāng)我把代碼進行上傳后，輸入網(wǎng)址，看見的頁面把我嚇壞了，發(fā)現(xiàn)所有樣式不存在了，第一反應(yīng)就是認為是自己在進行打包配置過程中出現(xiàn)了什么問題，然后通過fillder進行調(diào)試，發(fā)現(xiàn)css文件是正確獲取到的
可以看到，這個css文件的type被攔截轉(zhuǎn)換為"text/plain"，這時候，我又把相關(guān)的配置文件看了兩遍，后面發(fā)現(xiàn)，真的是日了狗了，讓我哭一會兒。先上圖
我擦，原來是服務(wù)器端返回的類型居然是"text/plain"。這個問題很好解決，把這圖直接給后端，是不是感覺被坑了/(ㄒoㄒ)/~~。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83999.html
摘要：是目前使用最為火熱的打包工具，各大知名的框架類庫都用其打包，國內(nèi)使用最近也火熱起來。但是坑也很多，比如說圖片，字體等文件的路徑。 webpack 是目前使用最為火熱的打包工具，各大知名的框架類庫都用其打包，國內(nèi)使用最近也火熱起來。它在單頁應(yīng)用和類庫打包上幫助許多人從代碼管理中解脫了出來，成為了當(dāng)下風(fēng)靡一時的打包工具。 但是坑也很多，比如說圖片，字體等文件的路徑。 剛開始用webpack...
摘要：有兩種方法，一種是在開發(fā)環(huán)境中設(shè)置通過的，另一種是在服務(wù)器上修改的配置設(shè)置。這樣我們以后使用訪問接口就可以不加了，打包后訪問也不用手動去除統(tǒng)一管理在項目開發(fā)過程中，會涉及到很多接口的處理，當(dāng)項目足夠大時，就需要統(tǒng)一管理接口。 這篇文章總結(jié)了vue項目的所遇到的問題，包括跨域、用戶認證、接口統(tǒng)一管理、路由配置、兼容性處理，性能優(yōu)化等內(nèi)容。 項目github地址 : 前端 https:...
摘要：首先，的命令和并不能在全局使用。文章有意將瀏覽器不能訪問服務(wù)器的兩個問題寫出來，是因為作者在排查問題的時候，發(fā)現(xiàn)在服務(wù)器直接訪問的頁面，能很好地檢查排除問題在百度尋找問題答案的時候，發(fā)現(xiàn)這種做法也得到了不少人的肯定。 前段時間要把項目部署到服務(wù)器，期間踩了不少的坑。故寫下這篇文章，從零開始把自己部署的過程都記錄下來，希望能給其他像我一樣的小白一點幫助。如果有疏漏的地方，請各位客官指出，...
閱讀 771·2021-11-11 16:54
閱讀 3097·2021-09-26 09:55
閱讀 2041·2021-09-07 10:20
閱讀 1230·2019-08-30 10:58
閱讀 1073·2019-08-28 18:04
閱讀 724·2019-08-26 13:57
閱讀 3624·2019-08-26 13:45
閱讀 1184·2019-08-26 11:42
