PWA 与 vue 的结合
来源:互联网 发布:算法设计策略 编辑:程序博客网 时间:2024/05/21 15:08
vue 和 渐进式应用合并。
发现 webpack 工具和 渐进式应用 配合并不怎么理想。 现搭建了一个demo, 实现 webpack 和 sw 的配合。
具体步骤如下:
1. v-cli 搭建一个 vue 项目
vue, 想必你应该很熟悉了吧,关于项目的编写,这里就不在多说了。
自己可以设置demo 需要写什么内容,也不过就是一些页面的呈现之内的,可以先写一个简单的,熟悉熟悉,几行文字,放几张图片
2. 编写 pwa 所需的的注册相关文件
- app.js (注册 service-worker 的文件)
- service-worker.js (sw 所需处理的事务, 如缓存等)
- manifest.json (应用桌面清单的设置)
- imgs (应用清单所需的图标icon)
如不了解,可以去看我上一篇关于 pwa 的文章介绍, 这里我也不多说,先看完步骤,然后去我的 github 看看写法,这样会更理解。
3. 配置webpack, 使页面能够加载 pwa 文件并运行。
这一步相对是重要的了。首先,我们要先弄明白 v-cli 脚手架打包的配置原理。 它分为了两个环境, 一个是 development(开发环境),一个是 production(生产环境)。
开发环境的运行,建立在 express 框架上, 它是一个极小且灵活的Node.js Web应用程序框架,打包好后的 dist 文件放在上面,能通过 localhost:8080 这样访问。
生成环境的运行,打包好后的 dist 文件,你拿去放在自己(公司)的服务器上运行,这里打包生成的 dist 文件路径就是本地。
所以区分打包文件的输出路径就是需要配置的,一个是localhost:8080, 一个是本地, 配置如下:
output: { path: __dirname + '/dist', filename: '[name].js', /** 公共路径, 判断环境然后采用路径 **/ publicPath: process.env.NODE_ENV === 'production' ? './' : '/'},
当是生产环境时, 就输出到当前目录下的路径,否则输出到localhost:8080 上的路径。
然后,我们知道,要注册 sw 文件,就需要在页面导入之前写过的 app.js 文件。这里,可以通过配置多个入口文件,打包 app.js 然后再把打包块注入到 html 页面中。具体配置如下:
/** 配置入口文件 **/entry: app: './src/main.js', registerSw: './scripts/app.js' //此路径为你编写的app.js路径}
// 注入打包生成的块文件new HtmlWebpackPlugin({ template: 'index.html', chunksSortMode: 'dependency', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }})
HtmlWebpackPlugin 插件是生成 html 文件的插件,可以去了解一下。这样生成的 html 文件就是会引入打包的 registerSw 块。
然后,根据你的编写的registersw.js, 里面会需要 service-worker.js 文件,但是,你根本没把它移动到输出的地方啊。这个时候就用到了 CopyWebpackPlugin 插件,它复制 pwa 所需的文件到 输出的地方。
new CopyWebpackPlugin([ { from: 'service-worker.js', to: 'sw.js' }])
同理, 把 manifest.json 、 imgs 都复制过去
new CopyWebpackPlugin([ { from: 'imgs', to: 'img' }, { from: 'manifest.json', to: 'manifest.json' }])
然后 启动项目,可以跑起来了。然后用 vue 写你想写的东西吧。
可以去看看我的 GitHub chorme-pwaDemo 项目,一目了然。
- PWA 与 vue 的结合
- vue与element-ui的结合,脚手架第一步【vue日记】
- 极验与vue的原生js结合
- vue与vue-i18n结合实现后台数据的多语言切换
- Android新技术PWA与GDD
- mui与vue结合 功能网址
- vue之vue与animate.css动画结合
- Project Server(PWA)的使用
- 基于PWA的异步监控
- 解决“UIkit与Vue.js结合使用时,UIkit的图标会显示两个”的问题
- Vue bootstrap的简单结合应用
- vue-cli与webpack结合如何处理静态资源
- Project 2007 PWA项目的checkout
- 比微信小程序早出发的PWA
- Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信
- Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信
- *与++的结合
- Vue.js结合Ueditor
- Spring MVC 单元测试
- 查看Apache服务器的错误log文件
- Ubuntu设置GOPATH,GOROOT环境变量
- Vue2.x EDU学院
- linux 下日志文件操作的基本命令(tail,grep)
- PWA 与 vue 的结合
- ifstream ofstream 的初始化使用
- 浅谈软测人员为什么要学Linux
- linux 下常用命令
- spring boot优雅的使用mybatis
- 安卓复习大纲
- php二维数组排序
- 2017ACM/ICPC广西邀请赛-重现赛
- 线性代数教程之一——矩阵乘法计算、理解及代码实现