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


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


相关推荐
givemeacar2 分钟前
十七:Spring Boot依赖 (2)-- spring-boot-starter-web 依赖详解
前端·spring boot·后端
前端郭德纲3 分钟前
JavaScript原生开发与鸿蒙原生开发对比
开发语言·javascript·harmonyos
辻戋10 分钟前
从零开始手写mini-webpack
前端·webpack·node.js
cch891811 分钟前
PHP vs 易语言:Web开发与桌面编程大对决
开发语言·前端·php
百撕可乐14 分钟前
NextJS官网实战02:项目的基础骨架搭建
前端·javascript·react.js
陈天伟教授20 分钟前
人工智能应用- 人工智能风险与伦理:01.数据安全
前端·人工智能·安全·xss·csrf
用户693717500138428 分钟前
Android 17 完整更新详解:Beta 3 已达平台稳定,这些新功能值得期待
android·前端·android studio
fengci.41 分钟前
Polar春季个人挑战赛WEB简单部分
android·前端
竹林8181 小时前
Web3前端开发:使用ethers.js监听智能合约事件
javascript·智能合约
张元清1 小时前
不用 WebSocket 库,在 React 中构建实时功能
前端·javascript·面试