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

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

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前端项目中浏览器缓存的更新不及时问题及解决方法