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" ? "./" : "/",

 

转载于:https://www.cnblogs.com/xiaofenguo/p/11290090.html