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


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


相关推荐
Full Stack Developme15 小时前
MyBatis-Plus 流式查询教程
前端·python·mybatis
用户4124675083715 小时前
用 Locust 压测一个网站,记录一下学习过程
前端
木斯佳16 小时前
前端八股文面经大全:字节TikTok前端一面(2026-04-17)·面经深度解析
前端·面试·八股·面经
SarL EMEN16 小时前
海康威视摄像头ISUP(原EHOME协议) 摄像头实时预览springboot 版本java实现,并可以在浏览器vue前端播放(附带源码)
java·前端·spring boot
px不是xp16 小时前
DeepSeek API集成:让小程序拥有AI大脑
javascript·人工智能·小程序
天渺工作室16 小时前
Svelte/SvelteKit 多语言配置指南
前端·svelte
咸鱼翻身了么16 小时前
微服务-乾坤
前端
Wect16 小时前
深度解析浏览器本地存储:原理、方案与实战指南
前端·面试·浏览器
前端那点事16 小时前
Vue自定义指令全解析(Vue2+Vue3适配)| 底层DOM操作必备
前端