为VUE项目添加PWA解决发布后刷新报错问题

为什么要给 VUE 项目添加 PWA

为什么要添加?因为不管是部署在 IIS,还是 nginx,每次应用部署后,再次访问因为旧的 js 已经不存在,所以页面访问的时候会整个报错,报错的结果就是一个白屏。
为了解决这个问题,我的解决方案是使用 PWA ,这样就可以将 js 缓存到本地,再次发布后,service-worker.js 会使旧的 js 失效,重新请求并缓存 js。

如果对于问题这个有更好的解决方案,务必请大佬指定一二

安装 PWA 的相关依赖包

yarn 安装

1
2
yarn add sw-precache-webpack-plugin --dev
yarn add uglify-es --dev

npm 安装

1
2
npm install sw-precache-webpack-plugin --dev-dev
npm install uglify-es --dev-dev

vue项目中关于axios的简单使用

axios介绍

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中
官方仓库:https://github.com/axios/axios
中文文档:https://www.kancloud.cn/yunye/axios/234845

axios在项目中(vue)的使用

没有vue项目的使用vue-cli脚手架生成一个webpack模板的项目即可愉快的看下去了~
如果开发遇到跨域问题可以参考:http://www.cnblogs.com/morang/p/8423763.html

安装axios到项目中

npm install axios --save

配置wepack别名,不同环境访问不同的配置接口

配置:
图片
使用:import config from 'config'