Vue應用部署到服務器的正確方式

Vue應用部署到服務器的正確方式

不少時候咱們發現辛辛苦苦寫的VueJs應用通過打包後在本身本地搭建的服務器上測試沒有什麼問題，但真正放在服務器上後，會發現或多或少的問題，好比：頁面出現空白現象，獲取資源路徑不對等，我相信以VueJs爲技術棧來進行前端開發的小夥伴或多或少都會遇到這樣的問題，我也遇到過，那如今咱們就來一一解決這樣的問題。

如何打包

• 基於Vue-Cli,經過npm run build來進行打包的操做

如何部署

• 將打包出來的資源，基於Vue-Cli的通常是dist目錄下有static目錄和index.html文件，能夠直接將這兩個文件扔到服務端

• 但有時候，咱們會直接將dist文件扔到服務端

出現的問題

• 打包到服務器後，出現資源引用路徑的問題

• 打包到服務器後，出現空白頁的問題

• 打包到服務器後，出現引入的css的type被攔截轉換爲"text/plain"問題

• 打包到服務器後，出現路由刷新404的問題

出現資源引用路徑的解決方案

通常這個問題是因爲在webpack配置打包發佈的目錄形成的。

• 狀況一.若是是將static與index.html直接放在服務器根目錄,也就是說，當前的應用訪問的網址如:http://www.xxx.com

  • 解決辦法：

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

• 狀況二.直接將打包後的dist文件放在了服務器的根目錄，也就是若是須要訪問當前的應用，訪問的網址如:http://www.xxx.com/dist

  • 解決辦法：

    首先須要在建立路由實例中增長：
    const router = new VueRouter({
    mode: 'history',
    base: '/mobile/',
    scorllBehavior: () => ({

    y: 0

    }),
    routes
    });
    而後再打包發佈目錄:
    publiPath:"/dist/"或者"http://www.xxx.com/dist/"

出現因爲路由的history模式下刷新當前路由出現404的問題

今天作的應用發佈到服務器上，發現當刷新當前路由的時候，就會出現404的情況，其實這是
由於當刷新當前頁面時候，所須要訪問的資源在服務器上找不到，也就是說，咱們在VueJs開發應用的過程當中，設置路由的路徑不是真實存在的路徑，而且使用了history模式。

• 解決辦法

須要後端進行配合,參考https://router.vuejs.org/en/essentials/history-mode.html

出現引入的css的type被攔截轉換爲"text/plain"問題

這是我開發過程當中遇到的感受很奇葩的問題，咱們都知道，通常基於Vue-Cli，經過WebPack打包後的資源不須要更改什麼。但是我發現，當我把代碼進行上傳後，輸入網址，看見的頁面把我嚇壞了，發現全部樣式不存在了，第一反應就是認爲是本身在進行打包配置過程當中出現了什麼問題，而後經過fillder進行調試，發現css文件是正確獲取到的

能夠看到，這個css文件的type被攔截轉換爲"text/plain"，這時候，我又把相關的配置文件看了兩遍，後面發現，真的是日了狗了，讓我哭一下子。先上圖

我擦，原來是服務器端返回的類型竟然是"text/plain"。這個問題很好解決，把這圖直接給後端，是否是感受被坑了/(ㄒoㄒ)/~~。