Vue中的nginx配置

401次阅读
没有评论

共计 2478 个字符,预计需要花费 7 分钟才能阅读完成。

Vue中的nginx配置

目前博主遇到的前端项目都是用的vue框架,这里就记录下曾今给vue项目配置nginx配置时遇到的问题

vue路由问题

子目录页面刷新404

Vue-router模式默认为hash模式,访问项目时url会带/#/。而如果修改vue-router模式为mode: 'history'

const router = new Router({
  mode: 'history'
});

此时路由就不会带#,但是在子目录页面刷新页面会出现404错误,按前端大大的说法是在vue中有自己的一套路由解析,该路由需要依靠入口文件,通过入口文件路由跳到子路径,而该子路径是nginx中不存在的,所以会报404。解决方式就是使用try_files在nginx中使用子请求模拟前端路由

server {
    listen    80;
    server_name axxx.xadocker.cn;
    location / {
        root /home/wwwroot/axxx.xadocker.cn/dist;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

一个server_name多个vue项目时

server {
    listen    80;
    server_name axxx.xadocker.cn;
    location ~ ^/vuea/ {
        root /home/wwwroot/axxx.xadocker.cn/vuea/dist;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    location ~ ^/vueb/ {
        root /home/wwwroot/axxx.xadocker.cn/vuea/dist;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

vue项目多个入口文件时

    location /admin {
        root /home/wwwroot/axxx.xadocker.cn/vuea;
        index admin.html admin.htm;
        try_files $uri $uri/ /admin.html;
    }

    location /login {
        root /home/wwwroot/axxx.xadocker.cn/vuea;
        index login.html login.htm;
        try_files $uri $uri/ /login.html;
    }

    location / {
        root /home/wwwroot/axxx.xadocker.cn/vuea;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

缓存问题

当时博主的项目都是微信项目,频频遇到更新项目时用户因缓存导致版本更不上,如果是有问题的版本,那就对客户很不友好了

这里缓存有几个方面:

  • 微信内置浏览器缓存
  • cdn缓存

博主尝试在vue项目中捕获入口,但是给客户的入口是已经不能改变(若客户愿意迭代时更换入口,则可以每次在入口后加个版本号如:https://xxxxx.xxx.xxx/xxx/xxxxxx?ver=123456)

此时博主又捕获不到入口emmmmmm,就采用了下面这种方式只对图片/js/css等资源缓存,其他html不缓存

    location / {
        root  /home/wwwroot/xxx.xadocker.cn/dist;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;

        # 不缓存
        add_header Last-Modified $date_gmt;
        add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
        if_modified_since off;
        expires off;
        etag off;
        # 不缓存
}

    location ~* ^.+.(jpg|jpeg|gif|png|ico|css|js)$ {
        root  /home/wwwroot/xxx.xadocker.cn/dist;
        access_log off;
        expires 7d;
}

而且阿里云上的cdn缓存规则博主这里保持为空,按阿里云的cdn的说明文档:

CDN节点在收到源站响应的静态文件资源的时候,会按照以下的缓存规则来执行(数值越小,优先级越高):

Vue中的nginx配置
  1. 源站响应pragma:no-cachecache-control:no-cache(或者no-store,或者max-age=0)时,不缓存。
  2. CDN控制台设置的缓存过期时间或者状态码过期时间。说明若CDN请求同时命中多条规则,有且仅有一条规则会生效,优先级为:权重>规则创建时间。
    • 有多条缓存规则的情况下,建议每条缓存规则都设置不同的权重(权重越大优先级越高),通过权重来控制规则执行优先级。
    • 权重相同的规则生效优先级:先创建的>后创建的,与规则类型无关。
  3. 源站配置其他缓存规则,优先级由高至低为:cache-control>expires>last-modified>etag。
    1. 源站响应中使用cache-control设置过期时间,取值为max-age,并且max-age大于0,例如:cache-control:max-age=3600。
    2. 源站响应中使用expires设置过期时间,例如:expires:Tue, 25 Nov 2031 17:25:43 GMT。
    3. 源站响应中携带了ETaglast-modified,则使用以下规则来计算缓存时间:
      1. last-modified,使用公式(当前时间-last_modified)* 0.1,计算结果在10秒~3600秒及之间的,取计算结果时间;小于10秒的,按照10秒处理;大于3600秒的,按照3600秒处理。
      2. 只有ETag,缓存10秒。
  4. 源站返回的数据中ETaglast-modifiedcache-controlexpires这些缓存相关的响应头都没有携带,则默认不缓存。

正文完
 1
xadocker
版权声明:本站原创文章,由 xadocker 2020-10-13发表,共计2478字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)