在打包項目的時候,發現打包後打開index.html檔案是空白(檢視 console時候顯示請求不到)。
1.為什麼請求不到?
1.通過檢視 network 可以發現,請求的路徑和實際的路徑有問題。
例如 你請求的路徑:E:/school/school/index.html#/index/home
你實際的路徑:E:/school/school/dist/index.html#/index/home
- router檔案中路由配置為 mode: ‘history’ 模式。
const router = new VueRouter({
routes,
mode: 'history',
})
2.解決辦法
2.1 在項目根目錄下(main.js在的檔案下)建立 vue.config.js 檔案。
2.2 vue.config.js 中進行路徑配置,在檔案中建立 **module.exports ={}**對象,
對象中添加 publicPath: “./” 屬性。(這個屬性中的相對路徑是以 index.html檔案來決定的,也可以在這個對象中添加别的屬性和方法)
module.exports = {
publicPath: "./", // 建構好的檔案輸出到哪裡
}
2.3 将router檔案中路由 取消 history模式。
3.理論依據
3.1 history 需要背景來配置 (來自官網)
mode
類型: string
預設值: "hash" (浏覽器環境) | "abstract" (Node.js 環境)
可選值: "hash" | "history" | "abstract"
配置路由模式:
hash: 使用 URL hash 值來作路由。支援所有浏覽器,包括不支援 HTML5 History Api 的浏覽器。
history: 依賴 HTML5 History API 和伺服器配置。(需要背景配置)
abstract: 支援所有 JavaScript 運作環境,如 Node.js 伺服器端。如果發現沒有浏覽器的 API,路由會自動強制進入這個模式。
新人小白,了解的實在有限,未來了解的更加透徹時再來補充,要是有幸被大佬看到,也希望可以指導一下。