nginx配置 vue打包后的项目 解决刷新页面404问题|nginx配置多端访问

栏目: 服务器 · Nginx · 发布时间: 4年前

内容简介:访问vue页面时,/# 使url看着不美观,使用 H5 history模式可以完美解决这个问题,但需要后端nginx帮助。接下来我们自己配置一下。使用前端路由,但切换新路由时,想要滚动到页面顶部,或者保持原先的滚动位置,就像重新加载页面那样,vue-router 可以让你自定义路由切换页面时如何滚动。当创建Router实例时,可以提供一个 scrollBehavior 方法:

访问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; //移动端root
            if ($mobile_rewrite = do_not_perform) { //根据重定向 重置 root
                root /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配置多端访问》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

计算机算法基础

计算机算法基础

沈孝钧 / 机械工业出版社 / 2013-11 / 45.00元

计算机算法是计算机科学的一个重要分支,也是一个难点。本书作者根据自己20多年在国内、国外的教学与科研实践,系统地总结了计算机算法的设计与分析方法,覆盖了大部分最主要的算法技术,包括:分治法、贪心法、动态规划、图的遍历技术、穷举搜索等,涉及一系列重要的算法问题,包括排序问题、选择问题、最小生成树问题、最短路径问题、网络流问题、二分图的匹配问题、字符串的匹配问题和几何算法问题等,还介绍了问题本身的计算......一起来看看 《计算机算法基础》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器