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


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


相关推荐
悦悦子a啊8 小时前
Web前端 练习1
前端·css·html5
Cache技术分享8 小时前
324. Java Stream API - 实现 Collector 接口:自定义你的流式收集器
前端·后端
yma168 小时前
前端react模拟内存溢出——chrome devtool查找未释放内存
前端·chrome·react.js
❀͜͡傀儡师8 小时前
Vue+SpringBoot 集成 PageOffice实现在线编辑 Word、Excel 文档
vue.js·spring boot·word
colicode8 小时前
Objective-C语音验证码接口API示例代码:老版iOS应用接入语音验证教程
前端·c++·ios·前端框架·objective-c
兆子龙8 小时前
被忽视的 React 神器:cloneElement 让你的组件开发效率提升 10 倍
前端·javascript
小圣贤君8 小时前
从「脑内人设」到「一眼入魂」:51mazi 小说人物图 AI 生成实战
前端·人工智能·文生图·ai写作·通义万相·写作软件·小说人物
SuperEugene8 小时前
《this、箭头函数与普通函数:后台项目里最容易写错的几种场景》
前端·javascript
Jing_Rainbow8 小时前
【React-11/Lesson95(2026-01-04)】React 闭包陷阱详解🎯
前端·javascript·react.js
麦芽糖02199 小时前
微信小程序七-2 npm包以及全局数据共享
前端·小程序·npm