您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“Vue如何應(yīng)用部署到服務(wù)器”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學習一下“Vue如何應(yīng)用部署到服務(wù)器”這篇文章吧。
如何打包
基于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ù)器根目錄,也就是說,當前的應(yīng)用訪問的網(wǎng)址如:http://www.xxx.com
解決辦法:
配置輸出的publiPath:"/"或者"./"
情況二.直接將打包后的dist文件放在了服務(wù)器的根目錄,也就是如果需要訪問當前的應(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/"
出現(xiàn)由于路由的history模式下刷新當前路由出現(xiàn)404的問題
今天做的應(yīng)用發(fā)布到服務(wù)器上,發(fā)現(xiàn)當刷新當前路由的時候,就會出現(xiàn)404的狀況,其實這是因為當刷新當前頁面時候,所需要訪問的資源在服務(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),當我把代碼進行上傳后,輸入網(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),真的是日了狗了,讓我哭一會兒。先上圖
以上是“Vue如何應(yīng)用部署到服務(wù)器”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學習更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。