Vue-Router的History模式配置指南

vue-router默认hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

不过这种模式要玩好，还需要后台配置支持。文章以nginx为例，详情见官方文档

域名根路径下部署配置

修改配置文件nginx.conf

location / {
  try_files $uri $uri/ /index.html;
}

try_files $uri $uri/ /index.html; 的意思是：例如用户请求https://www.my-app.com/my-app时，这里的$uri就是/my-app，try_files会尝试找my-app这个文件，如果存在就将文件的内容发送给用户。如果没有的话，就会尝试找有没有名为/my-app/的目录，这里的$uri/就是/my-app/。如果都找不到就会返回最后一个选项/index.html，将 https://www.my-app.com/index.html的内容返回到客户端。

域名子路径下部署配置

例如，项目被部署在https://www.my-app.com/my-app/子路径上

一、vue.config.js 配置文件修改

// vue.config.js
module.exports = {
  publicPath: "/my-app/"
}

如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。

详情见官方文档

二、vue-router 配置文件修改

const router = new VueRouter({  
    mode: "history",  
    base: "/my-app/",
    routes
});

三、nginx.conf 配置文件修改

server中重新配置一个子路径。需要几个子路径，就配置几个location。

location /my-app {
  alias 根目录/my-app; 
  try_files $uri $uri/ /my-app/index.html;
}

配置完成，将打包好的前端静态资源放在域名指定的根目录下的子目录即可😀