vue-router的history模式是个提升颜值的好东西，没有hash的route看起来干净多了。在开发的时候，如果我们使用devServer来启动服务，由于我们一般不共享端口，所以一般不会出现非根目录的问题。使用historyApiFallback可以解决刷新后404的问题。但是当我们的项目对外开放时，往往无法在域名的根目录下提供服务。此时资源的访问路径与开发时的根目录不同。首先我们通过webpack配置项目中所有资源的基本路径，让这段代码无论是在开发环境还是生产环境都能正确的找到资源。//config/index.jsmodule.exports={dev:{...//开发环境根目录-服务根目录-绝对路径assetsPublicPath:'/'...},build:{...//生产环境根目录-服务器访问路径-绝对路径assetsPublicPath:'/test/project1/'...}}//build/webpack.common.conf.jsconstconfig=require('../config')module.exports={输出：{publicPath:process.env.NODE_ENV==='生产'?config.build.assetsPublicPath:config.dev.assetsPublicPath}}//build/webpack.dev.conf.jsconstcommon=require('./webpack.common')module.exports=merge(common,{devServer:{historyApiFallback:true}}然后在提供服务的服务器配置中做如下配置（以nginx为例）：location/test/project1{alias.../project1;//项目索引index.html的真实路径;try_files$uri$uri//test/project1/index.html;}try_files会检查参数中的资源是否按顺序存在，并返回第一个找到的资源，如果没有找到，会让nginx内部重定向到下一个顺便说一句，它的作用是解决刷新404的问题，这里值得注意的是try_files的参数是绝对路径。至此，你开启历史模式的项目可以在任何路径下顺利运行。欢迎大家评论指正点赞哦~眨眼原文链接-《vue-router 启用 history 模式下的开发及非根目录部署》
