create-uniapp-pages-json

根据路由配置生成 uni-app 的 pages.json 文件，开发时支持实时监听路由文件变化，重新生成 pages.json 文件。

痛点

通常的，当我们开发 uni-app 时，pages.json文件都是一个不可磨灭的痛，添加页面时必须先在pages.json中添加配置，而且不可动态更改，无法个性化配置。

特性

1、用法简单，配置便捷 2、开发时支持实时监听

Step 1

安装工具

# Yarn
yarn add create-uniapp-pages-json --dev

# Npm
npm install create-uniapp-pages-json --save-dev

Step 2

生成配置文件

npx pages-config-json-init

此时项目根目录会生成一个 pages.config.json 的文件，内容如下：

{
  "rootPath": "./",
  "modulePath": "./",
  "defaultConfigFile": "",
  "routeFileName": ""
}

可以手动自行创建

配置参数说明

rootPath

生成的 pages.json 存放的位置，对于 uni-app 项目，如果是用cli创建的，rootPath的值应为"./src"， 如果是用工具创建的，rootPath的值应为"./"，如果不配置，默认值为"./"。

modulePath

模块目录路径，有些项目是拆成子模块开发的，命令会在该路径下递归查找 "routeFileName"配置的文件名称，如果不配置，默认值为"./"，从根目录往下查找。

defaultConfigFile

由于pages.json文件的配置中，不光有页面路由配置，还有很多其他的全局配置，所以其他配置需要有一个文件来承载，此参数为必填参数，必须是相对路径+文件名称，例如："./src/global.js",

module.exports = {
  pages: [],
  globalStyle: {
    navigationBarTextStyle: 'black',
    navigationBarTitleText: 'uni-app',
    navigationBarBackgroundColor: '#F8F8F8',
    backgroundColor: '#F8F8F8',
  },
}

必须使用 commonjs 导出。

routeFileName

路由配置文件名称，此参数为必填参数，例如："index.route.js",

module.exports = [
  {
    path: '/pages/ep-app-login/views/login/index',
    name: 'login',
    isRoot: true, // 此属性会让改路由生成在pages.json的首位。
    style: {
      navigationBarTitleText: '绑定',
    },
  },
  {
    path: '/pages/ep-app-login/views/home/index',
    name: 'home',
    aliasPath: '/',
    style: {
      navigationBarTitleText: '首页',
    },
  },
]

必须使用 commonjs 导出。

Step 3

开始生成 pages.json 文件

1. 单独使用

npx create-uniapp-pages-json

2. 配置 package.json 中

{
  ...
  "scripts": {
    "create": "create-uniapp-pages-json",
    ...
  },
  ...
}

3. 配置 package.json 中和开发命令并行使用

{
  ...
  "scripts": {
    "serve": "create-uniapp-pages-json && npm run dev:h5",
    "build": "create-uniapp-pages-json && npm run build:h5",
    ...
  },
  ...
}

Step 4

可选，如果需要在开发中实时监听routeFileName | defaultConfigFile配置文件的变化，还需要在vue.config.js文件中使用webpack插件

const { WatchUniAppRoutesPlugin } = require('create-uniapp-pages-json');

module.exports = {
  configureWebpack: {
    plugins: [
      new WatchUniAppRoutesPlugin()
    ]
  },
  ...
}

欢迎使用，并给我一些反馈和建议，让这个插件做的更好，新功能准备中