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端项目啦。

有些地方可能表述的不够清晰,又不懂的地方可以留言,我看到知道后一定会及时回答的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/536463.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法导论2nd 10.1-7

为什么80%的码农都做不了架构师?>>> 思路:两个队列q1和q2,两个队列指针pusher和poper分别指向q1和q2,push时调用pusher->enqueue,然后将poper里的元素全部dequeue并enqueue到pusher,最后交换…

阿里云Windows2012 R2服务器IPV6配置记录

要上苹果APP,则必须要支持IPV6和HTTPS,阿里云本身没有开放IPV6地址。因此需要进行IPV6的相关配置。查了很多IPV6的配置资料,最终选择用HE进行IPV6设置。在这过程中遇到一些问题,以记录下来以备注。 1、IPV6 Tunnel Broker设置 在H…

mycat 1.6.5 for mysql 8分表攻略

2019独角兽企业重金招聘Python工程师标准>>> 简述 mycat 对于 mysql 的支持有版本要求,目前 1.6.5 不支持 mysql 8.0 版本。因为mysql 8.0 的加密方式发生了变化。 mycat 1.6.5 连接 mysql 8.0 的两个方式 mysql 8.0 采用兼容方式,&#xff0…

Funcode-贪吃蛇

自己编写的一个小游戏,本来打算做贪吃蛇,结果不会使蛇的身子随蛇头方向改变而改变就换了种想法,最后变成了这样一个另类的小游戏,“笑哭“,下面是程序的主要代码,如果有兴趣也可以下载完整程序代码资源&…

mac 使用远程连接

https://www.jianshu.com/p/9cc90361f37a转载于:https://www.cnblogs.com/xiangsj/p/10876400.html

systemtap执行过程中报probe timer.profile registration error

probe timer.profile registration error 今天在执行火焰图的过程中,代码报错,probe timer.profile registration error 经过查询、分析可能是在该平台该函数是不安全、不共享的。 将 probe timer.profile { 用该代码替换即可 probe perf.sw.cpu_clock !…

(十三)java版spring cloud+spring boot+redis社交电子商务平台-springboot集成spring cache...

电子商务社交平台源码请加企鹅求求:一零三八七七四六二六。本文介绍如何在springboot中使用默认的spring cache,声明式缓存Spring 定义 CacheManager 和 Cache 接口用来统一不同的缓存技术。例如 JCache、 EhCache、 Hazelcast、 Guava、 Redis 等。在使…

搭建gitlab及部署gitlab-runner

2019独角兽企业重金招聘Python工程师标准>>> 1、搭建gitlab,之前yum安装gitlab,安装后一直报502错误,网上百度试过还是无法使用; 所以这次部署在docker里面;如下命令: docker run --detach --hostname gitlab.forebix.com --publish 4433:443 --publish …

母牛的故事

母牛的故事 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Description 有一对夫妇买了一头母牛,它从第2年起每年年初生一头小母牛。每头小母牛从第四个年头开始,每年年初也生一头小母牛。请编程实现在第n年的时候…

软件性能测试

通常,衡量一个软件系统性能的常见指标有: 1、响应时间(服务器端响应时间、网络响应时间、客户端响应时间) 那客户感受的响应时间其实是等于客户端服务器端网络响应时间 2、吞吐量 软件系统在每单位时间内能处理多少个事务/请求/单…

王小二切饼

王小二切饼 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Description 王小二自夸刀工不错&#xff0c;有人放一张大的煎饼在砧板上&#xff0c;问他&#xff1a;“饼不许离开砧板&#xff0c;切n(1<n<100)刀最多能分成多少块&…

SmoothNLP 中文NLP文本处理工具 Python 实战示范

SmoothNLP pythonJavaPython python interfaces for SmoothNLP 的 Python 接口&#xff0c; 支持自动下载底层jar包 &#xff0c;目前支持Python3 Pypi 官方安装 pip3 install smoothnlp 复制代码请注意使用python3安装smoothnlp项目&#xff0c;当前版本 version0.2.4 如果您使…

本地缓存Caffeine

Caffeine 说起Guava Cache&#xff0c;很多人都不会陌生&#xff0c;它是Google Guava工具包中的一个非常方便易用的本地化缓存实现&#xff0c;基于LRU算法实现&#xff0c;支持多种缓存过期策略。由于Guava的大量使用&#xff0c;Guava Cache也得到了大量的应用。但是&#x…

《图解HTTP》核心知识总结

HTTP协议的简介 HTTP是超文本传输协议&#xff0c;用于客户端和服务器端之间的通信&#xff0c;属于TCP/IP中的应用层。 HTTP协议的基础知识 客户端和服务器端 客户端是服务请求方&#xff0c;服务器端是服务提供方。 URI和URL URI:URI是统一资源标识符&#xff1b; URL:是统一…

1042: 筛法求素数

1042: 筛法求素数 Time Limit: 1 Sec Memory Limit: 128 MB Submit: 1387 Solved: 918 [Submit][Status][Web Board] Description 用筛法求之N内的素数。 Input N Output 0&#xff5e;N的素数 Sample Input 100 Sample Output 2 3 5 7 11 13 17 19 23 29 31 37 4…

状态机解析请求行

微信公众号&#xff1a;郑尔多斯关注「郑尔多斯」公众号 &#xff0c;回复「领取资源」&#xff0c;获取IT资源500G干货。升职加薪、当上总经理、出任CEO、迎娶白富美、走上人生巅峰&#xff01;想想还有点小激动关注可了解更多的Nginx知识。任何问题或建议&#xff0c;请公众号…

GO 从零开始的语法学习二

for循环 if条件里不需要括号 err ! nil 判断是否为空 func main(){const filename "abc.txt"contents , err : ioutil.ReadFile(filename); err ! nil{fmt.Println(err)} else{fmt.Printf("%s\n",contents)} } 复制代码if的条件里可以进行赋值if的条件里…

7个有用的Vue开发技巧

1 状态共享 随着组件的细化&#xff0c;就会遇到多组件状态共享的情况&#xff0c;Vuex当然可以解决这类问题&#xff0c;不过就像Vuex官方文档所说的&#xff0c;如果应用不够大&#xff0c;为避免代码繁琐冗余&#xff0c;最好不要使用它&#xff0c;今天我们介绍的是vue.js …

Kewail-邮件短信接口的基础教程

短信接口接入流程开始接入手机短信接口接入操作流程&#xff1a;申请短信签名 → 申请短信模板 → 生成AccessKey → 下载DEMO/攒写接口调用文档 → 免费测试发送 → 购买发信量正式使用。一、申请短信签名接入API接口&#xff0c;通过1069通道发送验证码等短信&#xff0c;必须…

传百度无人车计划分拆,百度回复:不实信息,目前未有分拆计划

据《财经》报道&#xff0c;百度无人车项目正在筹备分拆(spin off)当中&#xff0c;且正在寻找外部投资机构融资。一位接近百度无人车项目人士对《财经》表明&#xff0c;分拆就是时间问题。对于无人车项目分拆一事&#xff0c;百度对 36 氪表示&#xff0c;媒体报道不实。目前…