vue打包后dist的使用

發現問題

vue項目完成打包出dist后准備打開index.html，發現居然頁面是一片空白，f12一片報紅。

分析問題

經過多次網上查詢后發現這是由於vue打包時，腳手架會幫你配置好大量參數，但其中路徑publicPath被配置為了"/",需要手動修改。

解決辦法

1、將vue.config.js中的publicPath:"/"修改為publicPath:"./"

2、刪除之前的dist重新打包。

結語

再次打包后打開dist中的index.html，發現頁面出來了，但是如果頁面有路由跳轉的話，會發現跳轉失敗，
這時需要修改router中的路由模式為hash:
在router的index.js中修改：從vue-router中引入createWebHashHistory，將createWebHistory(process.env.BASE_URL)改為createWebHashHistory(process.env.BASE_URL)。

最后重新打包即可。