为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'

日常开发中的几个常用跨域处理方式

设置express代理请求

在基于vue-cli的项目中,在开发环境配置(config/dev.env.js)中设置代理,能够将所有/apidomain开头的请求都通过npm run dev启动的express服务器重定向到目标接口

1
2
3
4
5
6
7
8
9
proxyTable: {
'/apidomain':{
target:'http://localhost:prot',//或ip或域名。
changeOrigin:true,
pathRewrite: {
'^/apidomain': ''
}
}
},

若要通过IP在局域网访问h5,启动开发服务器的时候添加host参数即可
即package.json的dev命令配置如下
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",

180分钟的视频让我写半天的代码

观视频《月薪4万的程序员有多强?半小时原生JS开发打气球游戏,征服现场数万人!》

清晨,日常打开B站,被首页此视频的标题所吸引,虽一看就是标题党,但还是没能抑制住好奇心。
视频共计60*3分钟,学习到了很多东西。其中后半部分有许多正三观的见解也非常认同。
视频地址:https://www.bilibili.com/video/av15152538/
参考视频写的demo:https://coding.net/u/yimocoding/p/WeDemo/git/tree/气球大战

js