history模式

需求目的

网页端Vue项目最开始是使用的hash模式，现在想通过nginx代理，需要将/#/这种hash模式改成history模式，由一个能标识项目的根路径去匹配转发，比如根路径/myproject。后续所有访问这个网页端的url都由这个根路径开始，例如：http://ip:port/myproject/login、http://ip:port/myproject/messageCode、http://ip:port/myproject/404 等。

前端更改

（1）路由配置

/src/router/index.js下
const router = new VueRouter({
    mode: "history",
    base: "/myproject/",
    routes // routes是自定义好的路由对象
})

（2）打包配置文件

/config/index.js下
build: {
    assetsPublicPath: "/myproject/", // 设置打包后项目的静态资源URL的根路径
}

后端更改

正如Vue-Router的官方文档所说，这个非常需要后台的配合，此项目后台为SprintBoot，项目中有一个类专门处理页面未找到的情况，在这个类里做修改。还需处理静态资源文件夹static，将/myproject/static映射到/static文件夹。此处不是很清楚，后续有需要可以补充。

最终效果

访问其他路径的URL(前端中未写明的路由)都会跳转到前端写好的404页面。直接访问ip.port 能跳转到首页，直接访问ip.port/myproject/l… 也能跳转到首页，登录后页面也能正常跳转。