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


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


相关推荐
GISer_Jing2 分钟前
前端职业发展进阶指南:从技术深耕到能力破界,向资深工程师稳步迈进
前端·javascript·架构·typescript
weiwx833 分钟前
【前端】Node.js使用教程
前端·node.js·vim
K姐研究社3 分钟前
Nano Banana 2 国内使用教程:LiblibAI 免翻墙使用
前端·javascript·html
松小白song13 分钟前
机器人路径规划算法之Dijkstra算法详解+MATLAB代码实现
前端·javascript·算法
SuperEugene14 分钟前
Vue3 中后台实战:VXE Table 从基础表格到复杂业务表格全攻略 | Vue生态精选篇
前端·vue.js·状态模式·vue3·vxetable
打小就很皮...18 分钟前
实现可交互的泳道图组件(React)
前端·react.js·泳道图
optimistic_chen18 分钟前
【Vue3 入门】掌握这些才能优雅上手
前端·javascript·vue.js·前端框架·visual studio code
认真的小羽❅18 分钟前
JavaScript完全指南:从入门到精通
开发语言·javascript·ecmascript
JEECG低代码平台38 分钟前
终端里的AI搭档:我用Claude Code提效的实战心得
前端·人工智能·chrome
HelloReader1 小时前
Flutter ChangeNotifier用 ViewModel 管理应用状态(九)
前端