vue-cli-plugin-octopus-cli是什么
基于vue-cli3 快速搭建移动端开发环境,目录结构同H5-vue-template
使用流程
// 新建一个空白的项目文件夹mkdir projectNamecd projectNameyarn init --yes// 安装vue-cli-plugin-octopus-clivue add octopus-cli// 关于安装选择项? Please choice rem or vw 选择适配方案? are you want to// 安装依赖yarn install
H5-vue-template介绍
技术方案
-
总体技术方案
- vue-cli3 脚手架搭建
- 适配方案:vw 或 rem 可选
- jsbridge 与原生 APP 交互
- 接入 sentry 错误上报
- 接入性能监控
- 多页面打包
- 多页分模块打包
- 多页面分模块一次性打包
- 缓存方案:离线包+ 资源预缓存(app-config.json)
-
依赖包介绍
- lodash
- octopus-ui
- octopus-util
- @ued2345/laserbeak
- @ued2345/eslint-config
- @ued2345/stylelint-config
-
兼容性
- Android 4.4+
- iOS 8+
-
统一使用yarn安装依赖包。
目录结构介绍
├── _build // 缓存配置文件及获取版本号util│ └── app-config.json // 缓存配置清单默认配置项│ └── build.js // 生成缓存配置清单app_config.json文件│ └── build-zip.js // 生成静态资源zip包│ └── builds.js // 多项目分模块一次性打包│ └── util.js // util方法,包含生成版本号方法├── public // 打包时自动拷贝到打包后的文件夹内│ └── staticPages // 存静态.html文件├── htmlTemplate // 放置html模板│ ├── index.html // index页面模板(rem适配)│ └── helpCenter.html // helpCenter页面模板 ├── vendor // DllPlugin抽取公用的第三方包,若无增减仅需生成一次(生成方法为npm run dll)├── src│ ├── api // ajax请求方法│ │ └── index // 同pages目录结构│ │ └── index.js│ ├── assets // 静态资源目录,会经过vue相关loaderPlugin编译│ ├── components // 公共业务组件│ ├── filters // 过滤器目录│ ├── mock // mock数据│ │ ├── data│ │ │ └──index-index.js // index page -> index组件调用的json数据│ │ ├── index // index page│ │ │ ├── index.js // index view调用的接口数据│ │ ├── jsBridgeData // jsbridge调用数据│ │ ├── index.js // mock数据入口│ │ └── jsBridgeMethods.js│ └── pages // 多页应用(以下每个文件夹相当于一个单页应用)│ ├── helpDetail // 帮助与反馈模块│ └── index // 首页模块及每个模块相同的文件结构│ ├── _components // index模块内公用组件│ ├── router // 路由配置│ ├── store // vuex状态管理│ ├── view // 页面文件│ │ └── index.vue│ └── main.js // 每个模块页,webpack入口必须统一命名为main.js├── plugins // 公用Vue mixins、dirctive等插件├── utils // 公用工具方法│ ├── monitorHandler.js // 接入sentry上报和性能监控│ ├── global.js // 全局方法jsCallNative│ ├── request.js // axios封装│ └── requestUtil.js // axios拦截加密和解码├── APP.vue // 主组件,页面入口文件├── .env // 在所有的环境中被载入的环境变量。为一个特定模式准备的环境文件的 将会比一般的环境文件 拥有更高的优先级├── .env.[mode] // 只在指定的模式中被载入,例如: vue-cli-service build --mode pro├── .env.local // 在所有的环境中被载入,但会被 git 忽略├── .stylelintrc.js // @ued2345/stylelint-config 配置├── babel.config.js // 可在此文件中引入polyfill、ui库的样式配置├── page.config.js // 多页配置项├── postcss.config.js // 优先取vue.config.js里面的配置,若vue.config.js无配置,则取postcss.config.js 配置├── README.md // 项目说明文档├── title.config.js // 单页面title配置├── vue.config.js // 项目配置文件,用来修改vue-cli3的默认配置└── webpack.dll.conf.js // dllplugin配置
env 环境配置项介绍
VUE_APP_APPNAME = "XQUA"; // 判断是否在APP内VUE_APP_ISENCRYPT = false; // 是否开启加解密VUE_APP_COOKIE ="I=i=500034266&u=500034266&n=%CA%D6%BB%FA%D3%C3%BB%A7_3b06c22276&m=300&t=1571627563.68461200&s=9acbabd12edf80f3e47f7727d8fb1a4a&v=1.1";VUE_APP_TOKEN = "f9f05d8ef436e73ff30351c8a0476eff";VUE_APP_ENCRYPTSTRTYPE = "1,"; // 加密类型VUE_APP_CDNURL = "//imgwx1.2345.com/toutiaoimg/cdn/h5/"; // 配置CDN地址VUE_APP_USECDN = index helpCenter; // 用到cdn模板,用','分隔
适配方案选择
- rem 适配
-
插件:postcss-plugin-px2rem
-
html 文件:如 index.html(html 标签: style="font-size: 10vw;", body 标签: style="font-size: 12px;")
- 由于 html 设置 font-size:10vw,在 androidv4.4.2 手机上存在 vw 兼容问题,如果项目需要兼容 4.4.2 机型,可以引入 viewport-units-buggyfill.js。
- 如helpCenter.html (引入 viewport-units-buggyfill.js 文件)
-
postcss.config.js: rootValue: 75, // 设计稿宽度(750)/10, 根据设计稿宽度设置
2、vw 适配
- 插件:postcss-px-to-viewport
- html 文件:如 helpCenter.html (引入 viewport-units-buggyfill.js 文件)
- postcss.config.js: viewportWidth: 750 // 设计稿宽度
注意事项
- 主入口文件统一命名为 main.js
- template 模板放在 htmlTemplate 目录下,名字同 src/pages/{template}/
- 先要运行:yarn dll(生成 dll 文件)
- 多页面多模块单独打包运行:
生成环境(pro):
- yarn build:prod {page}
测试环境 (beta)
- yarn build:test {page}
- 多页面多模块单独打包的快捷方式:一次性打多个模块:
生成环境(pro):
- yarn builds:prod
测试环境 (beta)
- yarn builds:test
- 多页面打包
生成环境(pro):
- yarn build:prod
测试环境 (beta)
- yarn build:test
- 生成缓存配置文件 app_config.json 和静态资源 zip 包
- yarn cacheBuild
构建流程
-
开发环境运行
yarn serve"serve": "vue-cli-service serve --mode dev" -
规范检查
// css lint检查yarn lint-css"lint-css": "stylelint src/**/*.scss src/**/*.vue"// eslint修复yarn lint"lint": "vue-cli-service lint --fix", -
运行 dllplugin 生死 dll 文件
yarn dll"dll": "webpack -p --progress --config ./webpack.dll.conf.js", -
测试环境 - 打包(不同项目打包命令不一样)
// 生产环境打包: 多页面多模块单独打包yarn build:test index// 生成环境打包:多页面打包yarn build:test"build:test": "vue-cli-service build --mode beta --page",// 生产环境打包: 多页面多模块单独打包的快捷方式:一次性打多个项目包:yarn builds:test"builds:test": "node ./_build/builds.js --mode beta" -
生成环境 - 打包(不同项目打包命令不一样)
// 生产环境打包: 多页面多模块单独打包yarn build:prod index// 生成环境打包:多页面打包yarn build:prod"build:prod": "vue-cli-service build --mode prod --page",// 生产环境打包: 多页面多模块单独打包的快捷方式:一次性打多个项目包:yarn builds:prod"builds:prod": "node ./_build/builds.js --mode prod" -
生成缓存配置文件和 zip 包
yarn cacheBuild"cacheBuild": "node ./_build/build.js" -
打包结果分析
// 多页面打包构建结果分析yarn report"report": "vue-cli-service build --report --mode beta",// 单项目构建结果分析yarn reports index"reports": "vue-cli-service build --report --mode beta --page",注: 运行命令后,在打包的文件中有个 report.html 文件,访问该文件即可
生成缓存配置文件
- 运行命令:npm run cacheBuild
- _build 文件下新建 app-config.json 文件
- baseUrl: String // 主域名
- cdnUrls: Array // cdn 主域名, 必须带有 https:或 http:(供客户端 cdn 下载资源,)
- charset:String // 写入缓存编码格式
- orderHtml: Array // html 排序,优先缓存
- outputDir:String // build 构建后生成的文件名
- zipDir: String // 静态资源 zip 包名,和 APP 端约定
- _build 文件夹新增 build.js、build-zip.js
- build.js: 生成 app-config.json 文件。
- lastModified: 发布时间,便于检验是否是最新文件。
- routes: html 写入缓存。
- url: html 的 url
- content: html 文本内容
- regx: 正则,用于路由为 history 模式下是 url 正确指向 html
- md5: html 内容生成 md5
- resources:静态资源 css/js/image 写入缓存
- url: 资源文件的 url(cdn资源或非cdn资源,都必须是相对路径)
- md5: 资源 内容生成 md5
- cdnIndex: 资源对应的 cdn地址(如无cdn资源,不配置该字段)
- build-zip.js: 生成 zip 包
- zip 包:config.js/dist.zip/md5 三个文件
- config.json: app 解压文件后根据 config.json 文件 md5 为 key 存入缓存
- dist.zip 包:build 后的 dist 文件
- md5:dist.zip 的 md5
- zip 包:config.js/dist.zip/md5 三个文件
- build.js: 生成 app-config.json 文件。
注意:
- FastH5SDKv1.1版本支持多cdn配置,新增cdnUrls数组,对应resources资源中的cdnIndex字段
- 如果要支持cdn资源,切记客户端FastH5SDK要升级到v1.1
- 无cdn资源,无cdnIndex字段
- cdnUrls中的cdn链接要带上https或http。
- resources各资源url均采用相对路径。