Vue项目打包部署Nginx配置及缓存问题解决__nginx部署vue项目

1、部署单个站点

配置如下

server {
    listen       80;
    server_name  localhost;


    location / {
      root   /app;    
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
}

其中:

/app 是网站根目录

2、部署多个站点

server {
  listen 80;
  listen 443 ssl http2;

  server_name www.demo.com;

  if ($ssl_protocol = "") { return 301 https://$host$request_uri; }


  # 前端
  location / {
      root /data/wwwroot/www;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }

   # 后台
   location ^~/admin {
      alias /data/wwwroot/admin;
      try_files $uri $uri/ /admin/index.html;
    }

  # 数据接口
  location /api {
     proxy_pass http://127.0.0.1:5000;
  }
}

3、缓存问题解决

html默认当做了静态文件传输，会被浏览器缓存，每次打开都拿不到最新的页面

使用Charles抓包发现：

访问网站首页压根没有进行请求，直接从浏览器本地获取了index.html文件。看来浏览器使用了强制缓存策略

添加以下配置，告诉浏览器怎么缓存html文件

# 对html文件限制缓存
location ~ .*\.(html)$ {  
  # 不缓存
  # add_header Cache-Control no-store;  
  # 或者用 协商缓存
  add_header Cache-Control no-cache;
  add_header Pragma no-cache; 
}

参数	说明
Cache-Control: no-cache	协商缓存，只能应用于http 1.1，会返回304(资源无更新)
Cache-Control: no-store	禁止缓存
Pragma: no-cache	和 Cache-Control: no-cache 相同，应用于 http 1.0 和http 1.1

参考
https://cli.vuejs.org/zh/guide/deployment.html前端项目中浏览器缓存的更新不及时问题及解决方法

推荐文章

欢快的围巾 · pdf.js缓存PDF文件吗？开发者社区

2 周前

玩足球的打火机 · 云筑网：建筑行业的综合型电商平台_采购

5 月前

豁达的枇杷 · 万能青年旅店出息了！贝斯手获政府特殊津贴，每个月多拿500元_姬赓

6 月前

开朗的洋葱 · 云南61干部任前公示赵德光拟提名保山市长候选人-搜狐新闻

1 年前

温文尔雅的菠萝 · 信息学院赵登吉课题组多篇论文被国际人工智能领域顶级会议AAMAS、ECAI录用

1 年前

酷酷的火柴 · 名侦探柯南灰原哀物语～黑铁的神秘列车～ - 知乎

1 年前