前言

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

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

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

问题分析

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

output: {
    path: path.resolve(__dirname, './dist'),
    // 因为用到了 html-webpack-plugin 处理HTML文件。处理后的HTML文件都放到了
    // dist文件夹里。html文件里面js的相对路径应该从使用 html-webpack-plugin 前
    // 的'/dist/' 改成 '/'
    publicPath: '/',
    filename: '[name].[hash].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 配置如下：

server {
    listen       80;
    server_name  localhost;
    location / {
        root 'D:/workspaceSet/vsc/csdnBlog/blog115/dist';
        try_files $uri $uri/ /index.html =404;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }   
}

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

import index from './index.vue';

export default [
    {
        path:'/',
        name: "index",
        component:index,
        children: [
            {
                path:"home",
                name: "home",
                component: ()=>import("./home.vue")
            },
            {
                path: "page1",
                name: "page1",
                component: ()=>import("./page1.vue")
            }
        ]
    }
]

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

注意此时不要点击头部“页面1”的链接，因为这么做会吧 page1.vue 缓存到服务器，我们就无法重现这个问题了。

然后打开 page1.vue 的编辑器，随便改点内容，再运行 npm run build 。为了确保服务器上的内容已经更新，你可以重启 Nginx 。然后在同一个浏览器标签页中打开控制台，点击“页面1”链接，你就可以看到控制台报错了。内容类似下面图片中的样子：

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

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

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