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模式才需要后台支持。


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


相关推荐
UXbot18 分钟前
AI原型设计工具如何支持团队协作与快速迭代
前端·交互·个人开发·ai编程·原型模式
ZC跨境爬虫1 小时前
跟着MDN学HTML_day_48:(Node接口)
前端·javascript·ui·html·音视频
PieroPc3 小时前
CAMWATCH — 局域网摄像头监控系统 Fastapi + html
前端·python·html·fastapi·监控
巴巴博一4 小时前
2026 最新:Trae / Cursor 一键接入 taste-skill 完整教程(让 AI 前端告别“AI 味”)
前端·ai·ai编程
kyriewen4 小时前
半夜三点线上崩了,AI替我背了锅——用AI排错,五分钟定位三年老bug
前端·javascript·ai编程
kyriewen4 小时前
我让 AI 当了 24 小时全年无休的“毒舌考官”
前端·ci/cd·ai编程
hexu_blog4 小时前
vue+java实现图片批量压缩
java·前端·vue.js
IT_陈寒5 小时前
为什么你应该学习JavaScript?
前端·人工智能·后端
lifejump5 小时前
Empire(帝国)CMS 7.5 XSS注入
前端·安全·xss