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


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


相关推荐
南玖i几秒前
SuperMap iServer + vue3 实现点聚合 超简单!
javascript·vue.js·elementui
web守墓人几秒前
【前端】ikun-pptx编辑器前瞻问题四:通过AI编写一个前端pptx编辑器
前端
泰勒疯狂展开2 分钟前
Vue3研学-标签ref属性与TS接口泛型
前端·javascript·vue.js
小二·2 分钟前
前端 DevOps 完全指南:从 Docker 容器化到 GitHub Actions 自动化部署(Vue 3 + Vite)
前端·docker·devops
忒可君2 分钟前
2026新年第一篇:uni-app + AI = 3分钟实现数据大屏
前端·vue.js·uni-app
Komorebi゛3 分钟前
【CSS】线性流动边框样式
前端·css·css3
我不吃饼干11 分钟前
手写 Vue 模板编译(生成篇)
前端·vue.js
s小布丁13 分钟前
vue2纯前端使用Docxtemplater生成word报告,包含echart图表,表格
前端
web小白成长日记9 小时前
企业级 Vue3 + Element Plus 主题定制架构:从“能用”到“好用”的进阶之路
前端·架构
APIshop9 小时前
Python 爬虫获取 item_get_web —— 淘宝商品 SKU、详情图、券后价全流程解析
前端·爬虫·python