vue-cli-plugin-octopus-cli v0.2.4

vue-cli-plugin-octopus-cli是什么

基于vue-cli3 快速搭建移动端开发环境，目录结构同H5-vue-template

使用流程

// 新建一个空白的项目文件夹
mkdir projectName
cd projectName
yarn init --yes

// 安装vue-cli-plugin-octopus-cli
vue add octopus-cli

// 关于安装选择项
 ? Please choice rem or vw. (选择适配方案)
 ? are you want to import a mock server?(Y/n) (选择是否导入mock服务， 默认true)

// 安装依赖
yarn install

H5-vue-template介绍

技术方案

1. 总体技术方案

   • vue-cli3 脚手架搭建
   • 适配方案：vw 或 rem 可选
   • jsbridge 与原生 APP 交互
   • 接入 sentry 错误上报
   • 接入性能监控
   • 多页面打包
   • 多页分模块打包
   • 多页面分模块一次性打包
   • 缓存方案：离线包+ 资源预缓存（app-config.json）

2. 依赖包介绍

   • lodash
   • octopus-ui
   • octopus-util
   • @ued2345/laserbeak
   • @ued2345/eslint-config
   • @ued2345/stylelint-config

3. 兼容性

   • Android 4.4+
   • iOS 8+

4. 统一使用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页面模板 (vw适配)
├── 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.pro) 将会比一般的环境文件 (例如 .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模板，用','分隔

适配方案选择

1. rem 适配

• 插件：postcss-plugin-px2rem

• html 文件：如 index.html(html 标签： style="font-size: 10vw;", body 标签： style="font-size: 12px;")

  1. 由于 html 设置 font-size:10vw，在 androidv4.4.2 手机上存在 vw 兼容问题，如果项目需要兼容 4.4.2 机型，可以引入 viewport-units-buggyfill.js。
  2. 如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 // 设计稿宽度

注意事项

1. 主入口文件统一命名为 main.js
2. template 模板放在 htmlTemplate 目录下，名字同 src/pages/{template}/
3. 先要运行：yarn dll（生成 dll 文件）
4. 多页面多模块单独打包运行:

   生成环境（pro）:

   • yarn build:prod {page} 测试环境 (beta)
   • yarn build:test {page}

5. 多页面多模块单独打包的快捷方式：一次性打多个模块：

   生成环境（pro）:

   • yarn builds:prod 测试环境 (beta)
   • yarn builds:test

6. 多页面打包

   生成环境（pro）:

   • yarn build:prod 测试环境 (beta)
   • yarn build:test

7. 生成缓存配置文件 app_config.json 和静态资源 zip 包
   • yarn cacheBuild

构建流程

1. 开发环境运行

   yarn serve
   
   "serve": "vue-cli-service serve --mode dev"

2. 规范检查

   // css lint检查
   yarn lint-css
   
   "lint-css": "stylelint src/**/*.scss src/**/*.vue"
   
   // eslint修复
   yarn lint
   
   "lint": "vue-cli-service lint --fix",

3. 运行 dllplugin 生死 dll 文件

   yarn dll
   
   "dll": "webpack -p --progress --config ./webpack.dll.conf.js",

4. 测试环境 - 打包（不同项目打包命令不一样）

   // 生产环境打包： 多页面多模块单独打包(dist/index/index.html)
   yarn build:test index
   
   // 生成环境打包：多页面打包(dist/xx.html)
   yarn build:test
   
   "build:test": "vue-cli-service build --mode beta --page",
   
   // 生产环境打包： 多页面多模块单独打包的快捷方式：一次性打多个项目包：
   yarn builds:test
   
   "builds:test": "node ./_build/builds.js --mode beta"

5. 生成环境 - 打包（不同项目打包命令不一样）

   // 生产环境打包： 多页面多模块单独打包(dist/index/index.html)
   yarn build:prod index
   
   // 生成环境打包：多页面打包(dist/xx.html)
   yarn build:prod
   
   "build:prod": "vue-cli-service build --mode prod --page",
   
   // 生产环境打包： 多页面多模块单独打包的快捷方式：一次性打多个项目包：
   yarn builds:prod
   
   "builds:prod": "node ./_build/builds.js --mode prod"

6. 生成缓存配置文件和 zip 包

   yarn cacheBuild
   
   "cacheBuild": "node ./_build/build.js"

7. 打包结果分析

   // 多页面打包(yarn build:test)构建结果分析
   yarn report
   
   "report": "vue-cli-service build --report --mode beta",
   
   // 单项目构建结果分析
   yarn reports index
   
   "reports": "vue-cli-service build --report --mode beta --page",

   注： 运行命令后，在打包的文件中有个 report.html 文件，访问该文件即可

生成缓存配置文件

1. 运行命令：npm run cacheBuild
2. _build 文件下新建 app-config.json 文件
   • baseUrl: String // 主域名
   • cdnUrls: Array // cdn 主域名, 必须带有 https:或 http:(供客户端 cdn 下载资源，)
   • charset：String // 写入缓存编码格式
   • orderHtml: Array // html 排序,优先缓存
   • outputDir：String // build 构建后生成的文件名
   • zipDir: String // 静态资源 zip 包名，和 APP 端约定
3. _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

注意：

1. FastH5SDKv1.1版本支持多cdn配置，新增cdnUrls数组，对应resources资源中的cdnIndex字段
2. 如果要支持cdn资源，切记客户端FastH5SDK要升级到v1.1
3. 无cdn资源，无cdnIndex字段
4. cdnUrls中的cdn链接要带上https或http。
5. resources各资源url均采用相对路径。