-
这种更新部署方式会引起下面的问题:
-
Webpack hash 有三种方式
-
hash:
-
hash是跟整个项目的构建相关，只要项目里有文件更改，整个项目构建的hash值都会更改，并且全部文件都共用相同的hash值。
-
chunkhash:
-
chunkhash和hash不一样，它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响.
-
contenthash:
-
contenthash是针对文件内容级别的，只有你自己模块的内容变了，那么hash值才改变，所以我们可以通过contenthash解决上诉问题
-
用户无感发版
-
只有一台服务器的情况下，我们的页面文件需要更新，通常操作是：先删掉旧文件，然后上传新文件，这段时间系统将不可用，对用户有一定的影响。
-
仅更新前端页面的前提下，文件名带有hash值还可以实现用户无感知发版：系统更新时，只需要将打包之后的文件除index.html以外的文件（js/css/img），全部上传到服务器网站目录，未修改文件（即重名文件）直接跳过，有修改的文件由于文件的hash值不同会被上传，上传完毕我们再将index.html覆盖掉旧版就行。这段时间用户已请求旧版本index.html的无影响（不会出现文件404，因为新旧版本js/css同时存在），而新访问用户则请求的是新版index.html，访问旧页面用户刷新也会请求新版文件，并且无缓存影响，即对用户使用0影响。一段时间之后，我们只需要按文件生成时间对比一下删除旧文件即可。PS：替换前端文件不需要重启服务器。
-
总结： 凡是文件名带有hash值的的文件都可以设置为“永久缓存”（一年），其他不带hash的文件使用etag来设置缓存，由Nginx判断是否过期。
-
Vue cli2.0+ 实现：
-
-
打包后生成的 文件
-
-
js存在改到的新版本和旧版本。
-
-
Vue 3.0 cli
-
和2.0+相同都是更改js css 的hash值。唯一不同的是，构建时3.0+默认把dist文件直接删除，导致旧版本文件内容被删除。 根据vue.config.js API 文档得出。
-
-
构建时传入 --no-clean 可关闭该行为。
-
服务器配置缓存
-
废话不说，以Nginx服务器为例，配置如下（配置文件nginx.conf的http模块）：
-
server {
-
location = /index.html { add_header Cache-Control no-cache; }
-
location ~ /static/ { add_header Cache-Control no-cache; }
-
location ~ /(js/|css/|img/|font/) { expires 30d; add_header Cache-Control public; }
-
}
-
总结参考
