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

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

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

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

解决静态资源获取问题

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

刷新页面 404 问题

将项目打包放在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模式才需要后台支持。


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


相关推荐
北京_宏哥几秒前
🔥Python零基础从入门到精通详细教程4-数据类型的转换- 上篇
前端·python·面试
springfe01012 分钟前
构建大顶堆
前端·算法
陈随易2 分钟前
一行代码,将网页元素变成图片!比 html2canvas 快 93 倍的截图神器来了!
前端·后端·程序员
小桥风满袖3 分钟前
Three.js-硬要自学系列29之专项学习透明贴图
前端·css·three.js
lzdy5 分钟前
TypeScript学习指北
前端
沉香亭北5 分钟前
vueRouter
前端
土豪码农5 分钟前
面试官:怎么禁止用户复制?
前端·javascript·面试
掘金安东尼6 分钟前
🧭 前端周刊第417期(2025年6月2日–6月8日)
前端·javascript·面试
我是若尘6 分钟前
BEM 规范 :前端 CSS 模块化开发之道
前端
日升7 分钟前
AI 组件库-MateChat 快速起步与核心概念
前端·ai编程·trae