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

很多時(shí)候我們發(fā)現(xiàn)辛辛苦苦寫(xiě)的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)在創(chuàng)新互聯(liá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.abc.com
• 解決辦法：

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

• 情況二.直接將打包后的dist文件放在了服務(wù)器的根目錄，也就是如果需要訪問(wèn)當(dāng)前的應(yīng)用，訪問(wèn)的網(wǎng)址如:http://www.abc.com/dist
• 解決辦法：
• 首先需要在創(chuàng)建路由實(shí)例中增加：

const router = new VueRouter({ 
 
mode: 'history', 
 
base: '/mobile/', 
 
scorllBehavior: () => ({ 
 
y: 0 
 
}), 
 
routes 
 
}); 

然后再打包發(fā)布目錄:

publiPath:"/dist/"或者"http://www.abc.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ㄒ)/~~。

分享文章：Vue應(yīng)用部署到服務(wù)器的正確方式
本文地址：http://muchs.cn/news/101577.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、微信小程序、做網(wǎng)站、虛擬主機(jī)、外貿(mào)建站、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)