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

江湖人称小程2023-09-25 21:27

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

javascript 复制代码

export default new Router({
  base: '/your_project_name/',
  mode: 'history',
  routes: [
    ......
  ]
})

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

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

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

powershell 复制代码

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

最后重启Nginx，systemctl restart nginx

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

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