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


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


相关推荐
不可能片场4 分钟前
AI视频成片 帧间差分把拼接缝照出来
前端·electron
写的都是BUG4 分钟前
APK 里的钥匙,一直就放在门口:聊聊加固真正该做什么
前端·算法
dpharness6 分钟前
我踩过的四个记忆坑,从预算到换机
前端·后端
ruanno_top9 分钟前
倒计时该用 deadline 还是每秒减一?我把两种写法都跑了一遍
vue.js
apollo_qwe10 分钟前
接口超时了,前端为什么不能直接重试?
javascript·http
用户77833661321114 分钟前
SerpBase驱动:用原生JS实现搜索意图分流浮层
前端
阿明的小蝴蝶14 分钟前
设备出厂横竖屏修改 & 默认手势导航修改(按键导航)
前端
SameX17 分钟前
ArkTS 做应用内"快捷胶囊" —— 续航日记踩过的两个鸿蒙声明式 UI workaround
前端
用户114818678948418 分钟前
水印的实现方式逻辑
前端·python
孟陬2 小时前
Foobar 技术周刊#160:大模型让大规模形式化软件验证成为现实丨AI写C++代码之后会发生什么?丨我们真的需要alpha() 函数吗丨重试,有时会让故障更
前端·后端·typescript