Ethan Zhu
©️朱俊辉
All Rights Reserved.

vue-router history模式踩坑

问题1: webpack-dev-server开发服务器环境下,vue-router使用history模式报错404,刷新404

解决方法: 在webpack.config.js文件中配置如下

要注意的一点就是在webpack.config.js文件里面,如果配置了output的publicPath这个字段的值的话,在index.html文件里面也应该做出调整。因为webpack-dev-server的根目录是相对publicPath这个路径的。因此,如果你的webpack.config.js配置成这样的:

output: {
        /*指明生成的文件放在哪里  要决定路径*/
        path: __dirname + '/dist',
        /*publicPath是项目运行在devServer中的根目录*/
        publicPath: '/assets/',
        /*指明生成的文件名称叫什么*/
        filename: 'build.js'
    }
devServer:  {//解决路由history模式的刷新跳转404问题
        /*设定webpack-dev-server的根目录.如果不进行设定的话,默认是在当前目录下*/
        contentBase: './assets',
        color: true,
        historyApiFallback: {
            rewrites: [
                /*
                *设置重定向,意思就是把符合dist路径开头的所有路径转向assets根目录下的index.html
                * dist是对应new router()中设置的base根路径
                * */
                { from: /^\/dist/, to: '/assets/index.html' }
            ],
        },
        port:4009
    }

 

原因:在访问server时,history模式是不带#号的,server会自动识别成路径,如果没有该路径,就会返回404,上传到服务器也需要配置

问题2:项目在服务器上上线时,vue-router使用history模式报错404

参考vue-router文档

vue-router文档上面的对服务器的配置意思是说,只要访问oursite.com这样的一个主机,不论后面的path是怎么样的,我服务器统统不管,全部把链接指向oursite.com/index.html,而这个html就是你vue的首页,接下来执行前端代码,vue-router框架就会分析你的url然后做vue-router相关的事情了.

以上这个过程就是后端放弃路由控制权限,将路由控制权交给前端来处理

踩坑注意点!  踩坑注意点!  踩坑注意点!  

一定要在new vueRouter中配置base!   base是根路径

应用的根路径。例如,如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 "/app/"

还要在webpack.config.js中的output中配置publicPath: ‘/路径/’;

2018-04-17
暂无评论

发表评论