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


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


相关推荐
牛奶1 分钟前
2026 春涧·前端走向全栈
前端·人工智能·全栈
Piper蛋窝1 分钟前
AI 有你想不到,也它有做不到 | 2025 年深度使用 Cursor/Trae/CodeX 所得十条经验
前端·后端·代码规范
LYFlied17 分钟前
WebAssembly为何能实现极致性能:从设计原理到执行优势
前端·wasm·跨端
韩立学长19 分钟前
【开题答辩实录分享】以《在线作业标准流程指导系统的设计与实现》为例进行选题答辩实录分享
java·javascript
百万蹄蹄向前冲1 小时前
2026云服务器从零 搭建与运维 指南
服务器·javascript·后端
释怀不想释怀1 小时前
vue布局,动态路由
前端·html
桜吹雪2 小时前
Vue 基础:状态管理入门
前端·vue.js
JavaGuide2 小时前
利用元旦假期,我开源了一个大模型智能面试平台+知识库!
前端·后端
yuanyxh3 小时前
程序设计
前端·设计
坚持就完事了3 小时前
JavaScript
开发语言·javascript·ecmascript