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


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


相关推荐
aesthetician5 分钟前
用铜钟听歌,发 SCI !
前端·人工智能·音频
代码or搬砖21 分钟前
flask与vue实现通过websocket通信
vue.js·websocket·flask
Mike_jia25 分钟前
LogWhisperer 全解析:打造你的Linux服务器AI日志分析中枢
前端
网安Ruler27 分钟前
崭新出厂,自研CipherForge小工具,攻破 D-Link M30 固件加密
前端·网络·python
daxiang1209220527 分钟前
记一次前端请求报错:Content-Length can‘t be present with Transfer-Encoding,+Cursor使用教训
前端·cursor
武清伯MVP28 分钟前
深入了解Canvas:HTML5时代的绘图利器(二)
前端·html5·canvas
float_六七29 分钟前
Spring AOP表达式速查手册
前端·javascript·spring
PineappleCoder31 分钟前
没 CDN = 用户等半天?四大核心机制:就近、分流、提速、容错全搞定
前端·性能优化
DsirNg33 分钟前
JavaScript 事件循环机制详解及项目中的应用
开发语言·javascript·ecmascript
suoyue_zhan35 分钟前
GBase 8s V8.8 安装部署实践指南
前端·数据库·chrome