vue-cli npm run build 打包問題 webpack@3.6

G_Owen發表於2018-09-10
VueNPMUIWeb

1, vue-router 路由 有兩個模式 (mode)

  • hash (預設模式)

    使用URL來模擬一個完整的URL 但是沒個URL都會帶上 “#/“ 支援所有瀏覽器

    這個模式使用 redirect (重定向) 手動重新整理頁面會定到 第一個頁面

  • history 模式

    history.pushState API 來完成 URL 跳轉而無須重新載入頁面 這個模式可去掉”#/”

    同時線上 (生成環境)需要後臺配合把所有訪問不到的資源路徑後臺重定向到 index.html

    後端配置例子

    https://router.vuejs.org/zh/guide/essentials/history-mode.html

  1. base 基礎路徑 預設為”/”

    整個單頁應用服務在 /dist/ 下，然後base就應該設為“/dist/”。

  1. 打包生產環境 會生成 dist目錄

    • 使用 hash 模式

      如果頁面是空白的 可能是 config ->index build 物件中assetsPublicPath “/” 的問題 可設定為”./”

      “/” :表示 訪問伺服器根目錄資源

      “./” 表示訪問伺服器當前目錄的根目錄資源

    • 如果使用 history 模式 如果只有樣式 無HTML 內容

      那麼 不僅僅 是assets PublicPath 問題

      還需進入dist 目錄 全選打包 並放入 伺服器訪問的根目錄解壓 比如 Tomcat 就要放進 ROOT 目錄中

      因為 只打包dist 資料夾 解壓的時候會生成 dist資料夾

      而進入 dist 資料夾全選檔案打包 解壓時會生成對應檔案

    • 如果 要使用 history 模式 並且不把前端資源包放到 伺服器根目錄下, 必須 配合 base 來使用

相關文章