{"id":19830513,"url":"https://github.com/lenqwang/vue-cli-plugin-multiple-page","last_synced_at":"2025-05-01T15:30:26.370Z","repository":{"id":56627366,"uuid":"307280197","full_name":"lenqwang/vue-cli-plugin-multiple-page","owner":"lenqwang","description":"A plugin for build/watch multiple page entries based on vue-cli https://npm.im/vue-cli-plugin-multiple-page/","archived":false,"fork":false,"pushed_at":"2021-01-04T07:57:55.000Z","size":465,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-06T15:06:18.165Z","etag":null,"topics":["multi","multiple-page","plugins","vue-cli"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lenqwang.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-26T06:28:27.000Z","updated_at":"2021-01-06T01:42:10.000Z","dependencies_parsed_at":"2022-08-15T22:10:54.036Z","dependency_job_id":null,"html_url":"https://github.com/lenqwang/vue-cli-plugin-multiple-page","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenqwang%2Fvue-cli-plugin-multiple-page","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenqwang%2Fvue-cli-plugin-multiple-page/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenqwang%2Fvue-cli-plugin-multiple-page/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lenqwang%2Fvue-cli-plugin-multiple-page/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lenqwang","download_url":"https://codeload.github.com/lenqwang/vue-cli-plugin-multiple-page/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251372533,"owners_count":21578967,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["multi","multiple-page","plugins","vue-cli"],"created_at":"2024-11-12T11:23:54.826Z","updated_at":"2025-05-01T15:30:25.805Z","avatar_url":"https://github.com/lenqwang.png","language":"JavaScript","readme":"# vue-cli-plugin-multiple-page\n\n\u003e A plugin that bundle multiple page based-on vue-cli. Unlike `vue-cli's pages` configuration, it's handled by sharding multiple pages into different webpack configurations \n\n## Usage\n\nInstall the plugin in your project created by vue-cli, if not please refer to [Not Vue-CLI created Project](#not-vue-cli-created-project)\n\n``` sh\nvue add multiple-page\n```\n\n## Commands\n\nHere are 3 commands for this plugin:\n\n1. `init-config`: initialize `vue.config.js` \u0026 `Views.json` two files to your project\n2. `build-multi`: build multiple page in parallel\n3. `watch-multi`: watch multiple page in parallel\n\nYou can use `vue-cli-service [command]` in your project\n\n### init-config\n\nThe command will be generates `vue.config.js`、`Views.json` files if your project haven't corresponding files\n\n- [vue.config.js](./template/vue.config.js)\n- [Views.json](./template/Views.json)\n\n### build-multi\n\nThe command will be build you entries where above generated configurations\n, and you can specify the entry by pass `--key` option, e.g:\n\n``` sh\nvue-cli-service build-multi --key page,page1 # build page,page1 two entries\n```\n\n`Views.json`:\n\n``` json\n{\n  \"basePath\": \"resources/assets/js/views\",\n  \"destBasePath\": \"public/js/v\",\n  \"entry\": {\n    \"page\": {\n      \"srcPath\": \"page\",\n      \"name\": \"index\",\n      \"output\": \"page-index\",\n      \"description\": \"test page\"\n    },\n    \"page1\": {\n      \"srcPath\": \"page1\",\n      \"name\": \"index\",\n      \"output\": \"page1-index\",\n      \"description\": \"test page1\"\n    }\n  }\n}\n```\n\nThe configuration file above will generates the following corresponding paths:\n\n- entry: [`yourProject/resources/assets/js/views/page/index.js`, `yourProject/resources/assets/js/views/page1/index.js`]\n- output: [`yourProject/public/js/v/page-index/index.js`, `yourProject/public/js/v/page1-index/index.js`]\n\n### watch-multi\n\nThis command, like the `vue-cli-service watch` command, It listens for changes to the entry file of configuration by passing the specified `--key` to bundle (in `watch` mode)\n\n## Customize Configuration\n\nThe plugin provides the ability to customize the configuration so that you can programmatically expose the configuration of multiple pages by creating a file called `multiple-page.config.js`:\n\n``` js\nconst path = require('path')\nconst resolve = name =\u003e path.resolve(__dirname, name)\nconst basePath = resolve('resources/assets/js/views')\nconst outputPath = resolve('public/js/v')\n\nmodule.exports = {\n  page: {\n    entry: path.join(basePath, 'page/index.js'),\n    output: path.join(outputPath, 'page-index'),\n    description: 'test page',\n    extract: true,\n    chunkName: 'index'\n  },\n  page1: {\n    entry: path.join(basePath, 'page1/index.js'),\n    output: path.join(outputPath, 'page1-index'),\n    description: 'test page1',\n    chunkName: 'index'\n  }\n}\n```\n\nIf you have both files (`Views.json`、`multiple-page.config.js`) in your root directory, The `multiple-page.config.js` file have a higher priority.\n\n## Not Vue-CLI created Project\n\nIf your project is not created by vue-cli. please refer to the following steps. (This scenario is suitable for older, multiple-page projects that are rendered primarily by backend template engines)\n\n`step1`: Installing these dependencies in your project if you haven't installed them\n\n``` sh\nyarn add @vue/cli-service vue-template-compiler --dev\nyarn add vue\n```\n\n`step2`: Add the following script commands to your `package.json` file:\n\n``` json\n{\n  \"scripts\": {\n    \"init:config\": \"vue-cli-service init-config\",\n    \"watch\": \"vue-cli-service watch-multi\",\n    \"build\": \"vue-cli-service build-multi\"\n  }\n}\n```\n\n`step3`: Add this plugin to your project\n\n``` sh\nvue add multiple-page\n```\n\nFinally Enjoy the same features as vue-cli\n\n## TODO\n\n- [] test cases","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flenqwang%2Fvue-cli-plugin-multiple-page","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flenqwang%2Fvue-cli-plugin-multiple-page","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flenqwang%2Fvue-cli-plugin-multiple-page/lists"}