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


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


相关推荐
ssshooter14 小时前
Tauri 项目实践:客户端与 Web 端的授权登录实现方案
前端·后端·rust
兆子龙15 小时前
【React】19 深度解析:掌握新一代 React 特性
前端·架构
Moment15 小时前
MinIO已死,MinIO万岁
前端·后端·github
无双_Joney15 小时前
心路散文 - 转职遇到AI浪潮,AIGC时刻人的价值是什么?
前端·后端·架构
有意义15 小时前
深度拆解分割等和子集:一维DP数组与倒序遍历的本质
前端·算法·面试
卤蛋fg615 小时前
vxe-table 如何实现分组列头折叠列功能
vue.js
小怪点点15 小时前
vue3使用
前端·vue.js
进击的尘埃15 小时前
Vitest 自定义 Reporter 与覆盖率卡口:在 Monorepo 里搞增量覆盖率检测
javascript
进击的尘埃15 小时前
E2E 测试里的网络层,到底该怎么 Mock?
javascript
Bigger16 小时前
CSS 这些年都经历了什么?一次看懂 CSS 的演化史
前端·css·前端工程化