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


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


相关推荐
计算机毕设VX:Fegn08954 分钟前
计算机毕业设计|基于springboot + vue个人博客系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·课程设计
Jim-2ha011 分钟前
【JavaScript】常见排序算法实现
javascript·算法·排序算法
鱼鱼块12 分钟前
彻底搞懂 React useRef:从自动聚焦到非受控表单的完整指南
前端·react.js·面试
2501_9466756414 分钟前
Flutter与OpenHarmony打卡轮播图组件
java·javascript·flutter
nwsuaf_huasir30 分钟前
积分旁瓣电平-matlab函数
前端·javascript·matlab
幽络源小助理36 分钟前
SpringBoot+Vue美食网站系统源码 | Java餐饮项目免费下载 – 幽络源
java·vue.js·spring boot
韭菜炒大葱40 分钟前
React Hooks :useRef、useState 与受控/非受控组件全解析
前端·react.js·前端框架
Cache技术分享44 分钟前
280. Java Stream API - Debugging Streams:如何调试 Java 流处理过程?
前端·后端
微爱帮监所写信寄信1 小时前
微爱帮监狱寄信写信小程序信件内容实时保存技术方案
java·服务器·开发语言·前端·小程序
沛沛老爹1 小时前
Web开发者实战A2A智能体交互协议:从Web API到AI Agent通信新范式
java·前端·人工智能·云原生·aigc·交互·发展趋势