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


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


相关推荐
KaMeidebaby13 小时前
卡梅德生物技术快报|单 B 细胞抗体制备:流程优化、表达系统适配与性能数据
前端·数据库·其他·百度·新浪微博
桜吹雪13 小时前
所有智能体架构(1):反思 (Reflection)
javascript·人工智能
lichenyang45313 小时前
从鸿蒙 AI 聊天 Demo 学习 ArkUI V2:第一天上手记录
前端
进击的松鼠13 小时前
OpenClaw 的五层架构设计与解析
前端·架构·agent
JavaGuide13 小时前
Claude Code 新功能Agent View 发布:终于不用在一堆终端窗口里找 Agent 了!
前端·后端·agent
不简说13 小时前
前端可视化打印设计器sv-print,一口气更新了30版
前端·源码·产品
颖火虫盟主13 小时前
Claude Code Hook 系统详解与 Hello World 实操
前端·网络·数据库
JavaGuide14 小时前
Claude Code + BrowserAct,夯爆了!一句话让 AI 帮你操控浏览器。
前端·后端·ai编程
七十二時_阿川14 小时前
Electron WebContents 完全指南:页面渲染、导航控制与安全实战
前端·electron
用户114818678948414 小时前
Vue 开发者快速上手 Flutter(五) -状态管理路径
前端