天天看點

vue項目打包流程

在打包項目的時候,發現打包後打開index.html檔案是空白(檢視 console時候顯示請求不到)。

1.為什麼請求不到?

1.通過檢視 network 可以發現,請求的路徑和實際的路徑有問題。

例如  你請求的路徑:E:/school/school/index.html#/index/home
	 	  你實際的路徑:E:/school/school/dist/index.html#/index/home
           
  1. 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,路由會自動強制進入這個模式。


           

新人小白,了解的實在有限,未來了解的更加透徹時再來補充,要是有幸被大佬看到,也希望可以指導一下。

繼續閱讀