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


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


相关推荐
傣味洋芋1 分钟前
WebSocket
网络·vue.js·websocket·网络协议
摘星编程3 分钟前
Flutter for OpenHarmony 实战:SliverList 滑动列表详解
android·javascript·flutter
陈_杨4 分钟前
前端成功转鸿蒙开发者真实案例,教大家如何开发鸿蒙APP-- 卡片编辑功能
前端·harmonyos
凡大来啦8 分钟前
Element plus的Select选择器点击不出现下拉列表
javascript·vue.js·elementui
jaqi.l9 分钟前
uni-app 小程序全局挂载分享功能,并动态配置页面是否可以分享
vue.js·小程序·uni-app
十年磨一剑~9 分钟前
springboot+vue+mysql手搓一个管理系统
vue.js·spring boot·mysql
Swift社区9 分钟前
Flutter 的异步问题,为什么和前端 Promise 问题高度相似?
前端·flutter
程序员Agions9 分钟前
AI 编程的"效率幻觉":为什么用了 Cursor 之后,你反而更累了?
前端·ai编程
Android技术之家12 分钟前
在手机上跑大模型?Google AI Edge Gallery 开源项目深度解析
前端·人工智能·edge·开源
DEMO派13 分钟前
CSS优先级规则以及如何提升优先级方案详解
前端·javascript·css·vue.js·reactjs·html5·angular.js