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，路由會自動強制進入這個模式。


           

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