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

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

内容简介:访问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配置多端访问》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

Building Web Reputation Systems

Building Web Reputation Systems

Randy Farmer、Bryce Glass / Yahoo Press / 2010 / GBP 31.99

What do Amazon's product reviews, eBay's feedback score system, Slashdot's Karma System, and Xbox Live's Achievements have in common? They're all examples of successful reputation systems that enable ......一起来看看 《Building Web Reputation Systems》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

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

Markdown 在线编辑器