vue 使用了浏览器的刷新之后报错_【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 文件。你的项目很可能是这么配置的：

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”链接，你就可以看到控制台报错了。内容类似下面图片中的样子：

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