【115】vue-router使用懒加载机制，在生产环境中，如何避免浏览器缓存Webpack 3 编译后生成的js路径，导致404错误。（一）

前言

为了适应不断变化的市场需求，软件产品需要持续部署。生产环境的部署周期往往短则一周，长则半个月。在这一持续部署的过程中，前端开发人员要面临一个问题：生产环境部署了新版本的代码后，如果用户没有 F5 刷新浏览器，就会导致浏览器缓存Webpack 3 编译后生成的js路径，导致404错误。

用户没有 F5 刷新浏览器的情况是有可能发生的。第一种可能发生的情况是用户经常不关机，而是休眠。第二种可能发生的情况是：用户打开浏览器输入 址，但是浏览器缓存了 index.html 和引用的 js 文件。

我准备写两篇文章来阐述如何解决这个问题。这篇文章重点讲如何重现这种错误。

问题分析

Vue.js 加 Weppack 是现在常见的前端项目开发配置。如果允许 webpack 把所有代码打包到同一个 js 文件中，会严重拖慢浏览器首屏加载速度，因此 vue-router 的懒加载机制就成为了必然的选择。同时当用户 F5 刷新 站页面的时候，为了避免 Webpack 打包生成的 js 文件被浏览器缓存，要用文件的哈希值来给 js 文件命名。这会让每次修改过的 vue 组件编译生成全新命名的 js 文件。你的项目很可能是这么配置的：

虽然上面的方法很好，能够解决用户 F5 刷新浏览器时的缓存问题。但是现实总是残酷的，如果用户在你部署完成后没有 F5 刷新页面（比如用户不关机，或者浏览器缓存了index.html 及其 js），就会碰到一个新问题： 当Webpack 加载一个修改过且没有缓存下来的页面的时候，因为 js 浏览器中保存的是旧的 js 文件名，而 Nginx 中的是新的 js 文件名，导致浏览器 出 404 错误！！

有些人可能想到在夜深人静的时候发布代码，但这并不能解决问题。原因有二： 1. 到了第二天浏览器还是会缓存 index.html 及其 js 文件。 2. 部分用户喜欢不关机，只是让机器处于休眠状态。

源码

我的所有博客的源代码都放在码云上， 址是https://gitee.com/zhangchao19890805/csdnBlog 。这篇博客的代码在git项目中的 blog115文件夹里面。

问题重现

首先你需要在自己的机器上安装一个服务器。我自己使用了 Nginx 作为前端静态资源的服务器。因为我用了HTML5模式的前端路由，所以 Nginx 配置做以下修改：

打开 Nginx 安装目录 / conf / nginx.conf 配置文件，server 配置如下：

blog115 中含有两个页面，分别是 home 和 page1，前端路由如下：

在blog115项目目录下执行 命令，会生成生产环境代码。在命令行中通过 cd 命令进入 Nginx 目录下，执行 命令，启动 Nginx。浏览器地址栏里输入 http://localhost
就可以看到页面了，如下图所示：

这样，我们就成功地重现了这个问题。

我一个写了两篇文章来说明这个问题：
【115】vue-router使用懒加载机制，在生产环境中，如何避免浏览器缓存Webpack 3 编译后生成的js路径，导致404错误。（一）

【116】vue-router使用懒加载机制，在生产环境中，如何避免浏览器缓存Webpack 3 编译后生成的js路径，导致404错误。（二）

文章知识点与官方知识档案匹配，可进一步学习相关知识Vue入门技能树webpack打包工具前端模块化23390 人正在系统学习中