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


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


相关推荐
YAY_tyy36 分钟前
Vue3 + Three.js 实战:自定义 3D 模型加载与交互全流程
前端·javascript·vue.js·threejs
星河耀银海37 分钟前
3D效果:HTML5 WebGL结合AI实现智能3D场景渲染
前端·人工智能·深度学习·3d·html5·webgl
英俊潇洒美少年2 小时前
SSE 流式接口讲解
javascript
美狐美颜sdk6 小时前
从人脸关键点到动态贴图:面具特效在美颜SDK中的实现原理
前端·图像处理·人工智能·直播美颜sdk·美颜api
我命由我123456 小时前
React Router 6 - 编程式路由导航、useInRouterContext、useNavigationType
前端·javascript·react.js·前端框架·html·ecmascript·js
威联通网络存储6 小时前
告别掉帧与素材损毁:威联通 QuTS hero 如何重塑影视后期协同工作流
前端·网络·人工智能·python
anOnion6 小时前
构建无障碍组件之Tabs Pattern
前端·html·交互设计
一招定胜负7 小时前
课堂教学质量综合评分系统
java·linux·前端
橙露7 小时前
JavaScript 异步编程:Promise、async/await 从原理到实战
开发语言·javascript·ecmascript
2301_780669867 小时前
前端logo替换开发
前端·vue.js