{"id":14976441,"url":"https://github.com/mrminfive/vue-multiple-page","last_synced_at":"2025-10-27T20:31:49.335Z","repository":{"id":94737014,"uuid":"98623994","full_name":"Mrminfive/vue-multiple-page","owner":"Mrminfive","description":"vue + webpack 多页/单页 脚手架","archived":false,"fork":false,"pushed_at":"2017-08-12T04:39:42.000Z","size":103,"stargazers_count":168,"open_issues_count":3,"forks_count":35,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-02-01T08:05:58.118Z","etag":null,"topics":["cli","mulitiple","vue2","webpack3"],"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/Mrminfive.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-28T07:51:14.000Z","updated_at":"2024-07-19T09:52:59.000Z","dependencies_parsed_at":"2023-03-23T07:41:04.832Z","dependency_job_id":null,"html_url":"https://github.com/Mrminfive/vue-multiple-page","commit_stats":{"total_commits":8,"total_committers":1,"mean_commits":8.0,"dds":0.0,"last_synced_commit":"4c3fb172a1d3452ee109e309f24c48b4e48b2834"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mrminfive%2Fvue-multiple-page","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mrminfive%2Fvue-multiple-page/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mrminfive%2Fvue-multiple-page/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mrminfive%2Fvue-multiple-page/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mrminfive","download_url":"https://codeload.github.com/Mrminfive/vue-multiple-page/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238553193,"owners_count":19491386,"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":["cli","mulitiple","vue2","webpack3"],"created_at":"2024-09-24T13:53:53.537Z","updated_at":"2025-10-27T20:31:43.998Z","avatar_url":"https://github.com/Mrminfive.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-multiple-page\n\n## 简介\n\n该项目为日常项目开发中抽离的一个脚手架，目的是为了方便后续开发。脚手架默认配置es6-7-8＋cssnext+vue开发环境，但并不仅限于用vue做开发。并对webpack打包流程做了优化处理。支持单页／多页面开发，支持代码切割异步加载，有兴趣者请参阅[webpack中文文档#代码分离](https://doc.webpack-china.org/guides/code-splitting/)。\n\n对新语法不熟悉的同学请参阅：\n* es6: [阮一峰es6入门](http://es6.ruanyifeng.com/)\n* cssnext: [postcss官网](http://postcss.org/)\n* vue: [vue中文官网](https://cn.vuejs.org/)\n\n## 使用\n\n``` shell\ngit clone https://github.com/Mrminfive/vue-multiple-page.git\ncd vue-multiple-page\nnpm install\nnpm run dev\n```\n\n## 打包\n\n项目默认配置三种代码环境，分别为 `production(正式环境)`、`production-d(测试环境)` 以及 `development(开发)`。\n\n测试环境与正式环境打包方式一致，主要用于正式版与测试版的代码微调。开发版本相对简单，取消代码压缩及其它不必要的优化，支持开发热更新。\n\n脚手架使用 [DllPlugin + DllReferencePlugin](https://doc.webpack-china.org/plugins/dll-plugin/) 打包外部资源包，优化打包速度，`manifest` 及打包后的文件包均放置在 `static/libs/js` 目录下，也可进入脚本自行配置路径。\n\n### dev\n\n``` shell\nnpm run dev\n```\n\n### build\n\n``` shell\nnpm run build\n```\n\n### build:d\n\n``` shell\nnpm run build:d\n```\n\n### dll(打包外部资源库)\n\n```  \nnpm run build:vendors\n```\n\n\u003e 如果需要打包外部资源库，应先跑 `build:vendors` 命令进行打包外部资源包，再执行编译。\n\n## 项目结构\n\n```\n.\n├── README.md\n├── build\n│   ├── build-d.js\n│   ├── build.js\n│   ├── dev-client.js\n│   ├── dev.js\n│   ├── util.js\n│   ├── webpack.base.config.js\n│   ├── webpack.dev.config.js\n│   ├── webpack.dll.config.js\n│   └── webpack.prod.config.js\n├── config\n│   ├── base.js\n│   ├── dev.env.js\n│   ├── index.js\n│   ├── prod-d.env.js\n│   ├── prod.env.js\n│   └── util.js\n├── package-lock.json\n├── package.json\n└── src\n    ├── pages\n    │   ├── common\n    │   │   └── js\n    │   │       └── common.js\n    │   ├── index (页面1，单页模式将默认将index文件夹作为页面)\n    │   │   ├── index.html\n    │   │   ├── js\n    │   │   │   ├── index.js\n    │   │   └── style\n    │   └── page2 (页面2)\n    │       ├── index.html\n    │       ├── js\n    │       │   └── index.js\n    │       └── style\n    └── static (静态资源文件夹)\n        ├── libs\n        │   └── js (js文件夹下的)\n        │       ├── manifest_vendors.json\n        │       └── vendors.js\n        └── test.txt\n```\n\n\u003e *注意*: 开启多页功能的情况下，脚本默认获取 `src/pages`文件夹下除 `common` 文件夹外的所有满足 `!(_)*/!(_)*.html` 条件的html文件作为html页面，并将满足条件的文件夹下的 `js` 文件夹下的 `index.js` 作为 webpack 打包入口。\n\n### 每个页面项目的基本格式\n\n```\n.my-page (页面名称)\n├── index.html (页面渲染的html模版)\n├── js\n│   └── index.js (页面脚本入口)\n└── style (页面的样式文件)\n```\n\n### 编译后的项目结构\n\n```\n.\n├── css\n│   ├── index.3f05035e.css\n│   ├── index.3f05035e.css.map\n│   ├── page2.3f05035e.css\n│   └── page2.3f05035e.css.map\n├── js\n│   ├── index.3f05035ea26e8a6c3eb8.js\n│   ├── index.3f05035ea26e8a6c3eb8.js.gz\n│   ├── index.3f05035ea26e8a6c3eb8.js.map\n│   ├── page2.3f05035ea26e8a6c3eb8.js\n│   └── page2.3f05035ea26e8a6c3eb8.js.map\n├── static ()\n│   ├── libs\n│   │   └── js\n│   │       ├── manifest_vendors.json\n│   │       └── vendors.js\n│   └── test.txt\n├── index.html\n└── page2.html\n```\n\n\n## 配置\n\n脚手架的基本配置为 `config/base.js` 文件。修改配置文件将影响打包效果。\n\n### 默认配置项\n\n``` js\n{\n    isMultiplePage: true,\n    // 是否启用异步加载功能\n    isOpenSyncImport: true,\n    // 最小chunk的大小\n    minChunkSize: 10000,\n    // dev模式下是否自动打开页面\n    autoOpenBrowser: true,\n    // 文件目录\n    assetsRoot: path.resolve(__dirname, '../src'),\n    // 生成目录\n    buildRoot: path.resolve(__dirname, '../dist'),\n    // 静态资源根目录\n    staticAssets: 'static',\n    // 生成路径\n    publicPath: '/',\n    // 公用别名\n    commonAlias: {\n        Static: 'static',\n        '@': 'pages'\n    },\n    // 外部扩展\n    externals: {\n        // '$': 'JQuery'\n    },\n    // 公众模块(默认情况下common／js文件下的文件作为`commons chunk`打包)\n    commons: {\n        // demo: path.resolve(__dirname, '../src/pages/index/js/demo.js')\n    },\n    // 要打包的外部资源库\n    library: [\n        'axios',\n        'vue',\n        'vue-router'\n    ],\n    // 要引进外部资源库的页面(为空则全部引入)\n    libraryEntry: [\n        // 'index',\n        // 'page2'\n    ],\n    // 本地开发端口\n    port: 8009,\n    // 本地开发代理\n    proxy: {\n        // '/api': {\n        //  target: \"http://*.com\",\n        //  changeOrigin: true,\n        //  pathRewrite: {\n        //      '^/api': ''\n        //  },\n        //  logLevel: 'error'\n        // }\n    }\n}\n```\n\n* `isMultiplePage` \u003cBoolean\u003e 是否多入口打包\n* `isOpenSyncImport` \u003cBoolean\u003e 是否启用异步加载功能（启用的状态下，`commons` 参数将失效）\n* `minChunkSize` \u003cNumber\u003e 最小chunk的大小 (`isOpenSyncImport` 参数为 `true` 是生效)\n* `autoOpenBrowser` \u003cBoolean\u003e dev模式下是否自动打开页面\n* `assetsRoot` \u003cString\u003e 资源文件目录 URL（参照webpack官方文档）\n* `buildRoot` \u003cString\u003e 打包后的文件目录 URL（参照webpack官方文档）\n* `staticAssets` \u003cString\u003e 在资源文件目录下的静态资源目录\n* `publicPath` \u003cString\u003e 打包后的文件目录对应的公开 URL（参照webpack官方文档）\n* `commonAlias` \u003cObject\u003e 公用别名（参照webpack官方文档）\n* `externals` \u003cObject\u003e 外部扩展（参照webpack官方文档）\n* `commons` \u003cObject\u003e 公众模块（默认情况下common／js文件下的文件作为`commons chunk`打包，在 `isOpenSyncImport` 参数启用的情况下将失效）\n* `library` \u003cArray\u003e 要打包的外部资源库（填写模块名或引用路径）\n* `libraryEntry` \u003cArray\u003e 要引进外部资源库的页面(为空则全部引入，填写页面名称，即入口文件夹名称)\n* `port` \u003cNumber\u003e 本地开发端口（默认为 `8009`）\n* `proxy` \u003cObject\u003e 本地代理（参照[http-proxy-middleware文档](https://github.com/chimurai/http-proxy-middleware)）\n\n## 备注\n\n*如果遇到脚本语法兼容问题，请升级 `node` 版本。其它问题请[提交问题(issue)](https://github.com/Mrminfive/vue-multiple-page/issues/new)*","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrminfive%2Fvue-multiple-page","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrminfive%2Fvue-multiple-page","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrminfive%2Fvue-multiple-page/lists"}