vue设置路由模式为history，打包部署，并解决404问题

现在Router配置里面加上 base 和 mode 属性：

export default new Router({
  base: '/your_project_name/',
  mode: 'history',
  routes: [
    ......
  ]
})
1
2
3
4
5
6
7

这样就能支持 history 模式了，但是现在静态资源获取还有问题。

解决静态资源获取问题

在 config/index.js 文件修改 assetsPublicPath 属性：

刷新页面 404 问题

将项目打包放在Nginx的 usr/share/nginx/ 目录下。然后在打开 /etc/nginx/nginx.conf 配置文件，在Server 段落增加下面这段配置

location /your_project_name {
	root   /usr/share/nginx;
	try_files $uri $uri/ /your_project_name/index.html;
}
1
2
3
4

最后重启Nginx，systemctl restart nginx

因为vue是单页应用，你的url都应该指向打包好的那个 index.html 上，其他逻辑都在js里面，所以history模式才需要后台支持。

---

技 术 无 他， 唯 有 熟 尔。
知 其 然， 也 知 其 所 以 然。
踏 实 一 些， 不 要 着 急， 你 想 要 的 岁 月 都 会 给 你。

---