nginx配置 vue打包后的项目 解决刷新页面404问题|nginx配置多端访问
访问vue页面时,/# 使url看着不美观,使用 H5 history模式可以完美解决这个问题,但需要后端nginx帮助。接下来我们自己配置一下。
使用前端路由,但切换新路由时,想要滚动到页面顶部,或者保持原先的滚动位置,就像重新加载页面那样,vue-router 可以让你自定义路由切换页面时如何滚动。
当创建Router实例时,可以提供一个 scrollBehavior 方法:
const router = new VueRouter({routes: [...],mode: 'history', //H5 history模式scrollBehavior (to, from, savedPosition) {// return 期望滚动到哪个的位置return { x: 0, y: 0 } //让页面滚动到顶部}
})
复制代码
更多滚动行为实例可以参考官网 router.vuejs.org/zh/guide/ad…
打包之后会造成一个问题,刷新打包文件页面 ,会出现404页面空白,接下来需要配置一下nginx文件,就可以访问打包后的文件了。
vue单页面的启动页面是index.html文件,路由实际是不存在的,所以会出现页面刷新404问题,需要设置一下访问vue页面映射到index.html上。
首先,我们需要确定一下打包静态资源的路径需要设置绝对路径
config/index.js
build: {assetsPublicPath: '/'
}
复制代码
然后配置一下nginx映射问题
location / {root /www/dist;index index.html index.htm;try_files $uri $uri/ /index.html; //映射到index.html上
}
复制代码
酱紫就可以访问啦。
有同学可能会遇到 nginx 配置pc端、移动端自动跳转的问题, 接下来我们配置一下。
http {include mime.types;default_type application/octet-stream;sendfile on;keepalive_timeout 65;server {listen 80;server_name www.baidu.com; //服务器网址set $mobile_rewrite do_not_perform; //设置pc重定向if ($http_user_agent ~* "(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os )?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino") {set $mobile_rewrite perform;} //设置移动端重定向location / {root /www/dist/m; //移动端rootif ($mobile_rewrite = do_not_perform) { //根据重定向 重置 rootroot /www/dist; //pc端root}index index.html index.htm;try_files $uri $uri/ /index.html; //映射到index.html上}location ~ ^/api {proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;proxy_pass http://unix:/home/dev/official/official.sock;proxy_max_temp_file_size 2m;proxy_connect_timeout 90;proxy_send_timeout 90;proxy_read_timeout 90;proxy_buffer_size 4k;proxy_buffers 4 32k;proxy_busy_buffers_size 64k;proxy_temp_file_write_size 64k;client_max_body_size 5m;} error_page 404 http://www.baidu.com;error_page 500 502 503 504 /50x.html;location = /50x.html {root html;}}
复制代码
酱紫就可以使用同一网址同时访问移动端和pc端项目啦。
有些地方可能表述的不够清晰,又不懂的地方可以留言,我看到知道后一定会及时回答的。
nginx配置 vue打包后的项目 解决刷新页面404问题|nginx配置多端访问相关推荐
- 配置vue打包后可以更改接口地址
有时候我们会遇到这种情况,项目开发完打包后,安排其他同事需要去客户现场集成,我们在去之前也不知道客户的服务器地址,这时候就可以把接口地址配置成打包后也可以更改,这样会方便许多,下面是具体流程: 1. ...
- Vue 部署单页应用,刷新页面 404/502 报错
在 Vue 项目中,可以选择 hash或者 history.pushState() 实现路由跳转.如果在路由中使用history模式: export default new Router({mode: ...
- CentOS中使用Docker+nginx部署Vue打包的dist项目
场景 CentOS7中Docker的安装与配置: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/119028701 首先按照上面在 ...
- 【转】怎样运行 Vue 打包后的项目
1. 一般打包完成后会在项目根目录生成一个 dist 文件夹,此时,我们在项目根目录新建一个 js 文件(我以 server.js 为例) server.js 中代码如下: const express ...
- vue-cli3.x正确打包项目,解决静态资源与路由加载无效的问题,history模式下配合使用nginx运行打包后的项目
vue-cli3.x正确打包项目,解决静态资源与路由加载无效的问题,history模式下配合使用nginx运行打包后的项目 参考文章: (1)vue-cli3.x正确打包项目,解决静态资源与路由加载无 ...
- [vue] 怎么解决vue打包后静态资源图片失效的问题?
[vue] 怎么解决vue打包后静态资源图片失效的问题? 上面蛮多回答感觉像开玩笑似的,静态资源图片失效分几种情况. 1.确定线上环境是否在根路径上,配置资源根目录,vue-cli2 和 vue-cl ...
- vue上线后图片不显示_解决Vue打包后访问图片/图标不显示的问题
大家可否遇到过 npm run build打包后,项目在线上运行时,资源文件 (图片.图标)不显示 的问题, 接下来,我给大家分享一下我的解决方案~ 1.检查打包后dist中的css文件 打开此文件后 ...
- vue打包后出现一些map文件的解决方法
Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1.运行 cnpm run build 开始 ...
- vue 打包后,后缀名为.woff等字体问题不能用解决办法
vue 打包后,后缀名为.woff等字体问题不能用解决办法 参考文章: (1)vue 打包后,后缀名为.woff等字体问题不能用解决办法 (2)https://www.cnblogs.com/mogu ...
最新文章
- 车辆摄像头夜晚场景图像ISP增强算法
- python 实用程序代码_【转】python常用工具代码
- MySQL里 unique 用法_mysql中unique key中在查询中的使用
- ubuntu安装mysql远程_Ubuntu18.04下远程安装MySQL
- 传统公司部署OpenStack(t版)简易介绍(一)——环境部署
- Mybaits插入记录返回主键值
- java XML解析防止外部实体注入
- kali linux 双显卡,Kali上双显卡驱动的安装
- PHP中使用八进制 可以在前面加,PHP学习笔记(二)
- 「镁客·请讲」MyToken郭楠:从币情开始,做区块链链上的去中心化生态
- Java实现自定义敏感词库过滤
- matlab5.0软件下载,MATLAB手机版
- 视频教程-Excel项目实战从入门到精通(兼容2007、2010、2013、2016)-Office/WPS
- [已解决]smallbin double linked list
- java cutline_利用JFreeChart生成饼形图
- bon app android,Bon App!
- java常用二进制数据转换工具
- 创建Excel,创建pdf
- 【推荐】数据湖技术及实践与案例资料汇总合集47篇
- 机器学习之机器学习绪论-王而川-专题视频课程
热门文章
- jq(jquery)之点击隐藏段落
- html匹配属性正则表达式,正则表达式匹配html标签的属性值
- 搭建go项目web服务器,3.2 Go搭建一个Web服务器
- archives_do.php,织梦后台文章管理中增加批量添加tag标签功能
- java序列化的方法_【Java常见序列化与反序列方法总结】
- 如何进入zabbix的wab界面_如何不用光盘重装系统呢?
- java切片_ java中一个极其强悍的新特性Stream详解(非常实用)
- oracle01537,ORACLE REUSE实验
- 30行python代码设计_30行Python代码实现3D数据可视化
- 什么叫大数据人物画像_大数据时代,如何构建精准用户画像,直击精细化运营...