vue-cli3使用vue-router 使用動態路由，在刷新頁面時報錯

剛發現的一個問題，在使用vue-cli3創建項目之后，使用動=動態路由，demo:

{
      path: '/aa/:id',
      name: 'aa',
      component: aa
    },

編程式路由：

this.$router.push({name:'aa',params:{id:1}});

頁面跳轉成功，參數也可以獲取到，但是在刷新頁面時，報錯了

其他方式的路由都沒有問題，找了半天不知道怎么回事兒，后來看了一下vue.config.js，publlicPath:'./'寫的是相對路徑，修改publicPath:'/',重新啟動就可以了，

查看vue-cli的publicPath之后明白，publicPath默認是/，它會假設應用被部署到一個域名的根目錄上，當被部署到一個子路徑時，需要修改為:/子路徑/;

可以修改為空字符串或者相對路徑，這樣就不用管項目部署的路徑，所有的資源加載都是相對路徑。

但是相對路徑有限制，在下面的情況應該避免使用：

1 當時用h5 history.pushState的路由時，

2 當使用pages構建多頁面應用時

參考:https://cli.vuejs.org/zh/config/#publicpath

 

vue-router的mode是history的情況下回發生上述問題，如果改成hash，使用默認值，publicPath可以使用相對路徑，沒有問題

，在histroy模式下，使用動態路由，publicpath不能是相對路徑

 

 

 

因為打包之后，靜態資源文件的路徑問題，需要把publicPath改成相對路徑，最后就修改為：

publicPath: process.env.NODE_ENV === "production" ? "./" : "/",