快捷導(dǎo)航

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

更新時(shí)間：2017年07月15日 16:27:06 作者：darkCode

本篇文章主要介紹了詳解Vue應(yīng)用部署到服務(wù)器的正確方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。

本文介紹了Vue應(yīng)用部署到服務(wù)器，分享給大家，希望此文章對(duì)各位有所幫助。

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

如何打包

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

如何部署

將打包出來的資源，基于Vue-Cli的一般是dist目錄下有static目錄和index.html文件，可以直接將這兩個(gè)文件扔到服務(wù)端
但有時(shí)候，我們會(huì)直接將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)資源引用路徑的解決方案

一般這個(gè)問題是由于在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)建路由實(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的問題

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

解決辦法

需要后端進(jìn)行配合,參考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)我把代碼進(jìn)行上傳后，輸入網(wǎng)址，看見的頁面把我嚇壞了，發(fā)現(xiàn)所有樣式不存在了，第一反應(yīng)就是認(rèn)為是自己在進(jìn)行打包配置過程中出現(xiàn)了什么問題，然后通過fillder進(jìn)行調(diào)試，發(fā)現(xiàn)css文件是正確獲取到的