{"id":19020560,"url":"https://github.com/zoomla/vue-cli4-multipage","last_synced_at":"2026-04-28T10:30:14.503Z","repository":{"id":40861482,"uuid":"238867203","full_name":"zoomla/vue-cli4-multipage","owner":"zoomla","description":"基于vue cli4页面共存路由配置全过程","archived":false,"fork":false,"pushed_at":"2023-01-05T06:43:39.000Z","size":24718,"stargazers_count":26,"open_issues_count":29,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-02T00:27:35.163Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","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/zoomla.png","metadata":{"files":{"readme":"README.md","changelog":null,"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-02-07T07:32:44.000Z","updated_at":"2024-12-13T08:08:28.000Z","dependencies_parsed_at":"2023-02-03T16:15:41.527Z","dependency_job_id":null,"html_url":"https://github.com/zoomla/vue-cli4-multipage","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoomla%2Fvue-cli4-multipage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoomla%2Fvue-cli4-multipage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoomla%2Fvue-cli4-multipage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoomla%2Fvue-cli4-multipage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zoomla","download_url":"https://codeload.github.com/zoomla/vue-cli4-multipage/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240065000,"owners_count":19742432,"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":[],"created_at":"2024-11-08T20:17:30.461Z","updated_at":"2026-04-28T10:30:14.281Z","avatar_url":"https://github.com/zoomla.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 写在前面\n使用vue cli进行开发，所有表现都会通过注入在index.html表现。\n\n如果要实现多个页面节点，一般通过路由来实现，路由有两种模式，分别是默认的hash模式，History模式，它们的区别是：\nhash模式，产生的目录结构为：www.doamin.com/#/good\nhistory模式，产生的目录结构为：www.doamin.com/good/\n\n配置的方法是定义router/router.js文件\n```\nconst router = new Router({\n    mode: 'history',\n    routers,\n});\n```\n\n即使是上面的方法，但对传统网页有所爱好者依然会不满意，比如会网友问：\n当前目前如果有多个页面怎么办？\n比如是否能实现这样的网页结构：\n\nwww.z01.com/pub/index.html\n\nwww.z01.com/pub/listpage.shtml\n\n\n答案是有的，伟大领袖告诉我们自力更生丰衣足食，让我们动起手来！\n\n##1 准备工作\n#####1.1 先查看版本\n```\nnpm -V\nnpm@6.12.0 C:\\Program Files\\nodejs\\node_modules\\npm\nvue -V\n@vue/cli 4.1.2\n```\n\n#####1.2 创建项目\n```\nvue create templates\n```\n会创建一个名为templates的项目\n目录结构为：\n![初始结构.png](https://upload-images.jianshu.io/upload_images/9915084-d1dacd0281af7b5b.png)\n\n```\nnpm run serve\n\nApp running at:\n- Local:   http://localhost:8080/\n- Network: http://192.168.43.36:8080/\n\nNote that the development build is not optimized.\nTo create a production build, run npm run build.\n```\n运行npm run serve，可以在\n```\nhttp://localhost:8080/\nhttp://192.168.43.36:8080/\n```\n看到这个页面：\n![初始index.png](https://upload-images.jianshu.io/upload_images/9915084-8998ec998478313d.png)\n\n##2 多页面配置\n#####2.1 修改目录\n\n1、在src目录下创建一个pages文件夹，\n2、在pages文件夹下面创建index文件夹，\n修改之后文件夹结构为：\n![第一次修改目录结构.jpg](https://upload-images.jianshu.io/upload_images/9915084-e955e6cd6281a433.jpg)\n\n3、把public文件夹下的index.html移到index文件夹，\n4、把components文件夹下面的HelloWorld.vue移到index文件夹，（这里可以不移动，因为这个是默认生成的一个例子，实际开发中，创建项目生成的这个页面我们根本用不到，移动只是为了方便做例子，不另外写一个index页面）\n5、把src文件夹下的App.vue和main.js都移到index文件夹下面\n\n这时候目录结构：\n![第一次移动文件.png](https://upload-images.jianshu.io/upload_images/9915084-f72dd8374ae9825a.png)\n\n#####2.2 理一下逻辑\n\n######*index.html*\n这个文件便是打开首页显示的文件。\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\"\u003e\n    \u003clink rel=\"icon\" href=\"\u003c%= BASE_URL %\u003efavicon.ico\"\u003e\n    \u003ctitle\u003etemplates\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cnoscript\u003e\n      \u003cstrong\u003eWe're sorry but templates doesn't work properly without JavaScript enabled. Please enable it to continue.\u003c/strong\u003e\n    \u003c/noscript\u003e\n    \u003cdiv id=\"app\"\u003e\u003c/div\u003e \u003c!-- 记住这里！！！！--\u003e\n    \u003c!-- built files will be auto injected --\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n记住 id=\"app\"这行\n\n\n######*App.vue*\n内容如下：\n```\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cimg alt=\"Vue logo\" src=\"./assets/logo.png\"\u003e\n    \u003cHelloWorld msg=\"Welcome to Your Vue.js App\"/\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport HelloWorld from './components/HelloWorld.vue'\n\nexport default {\n  name: 'app',\n  components: {\n    HelloWorld\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle\u003e\n#app {\n  font-family: 'Avenir', Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n\u003c/style\u003e\n```\n这里就是写index.html中id=\"app\"这个div的内容。\n并且引入了HelloWorld.vue\n在\n```\ncomponents: {\n    HelloWorld\n  }\n```\n包含了这个组件\n在\n```\n\u003cHelloWorld msg=\"Welcome to Your Vue.js App\"/\u003e\n```\n给HelloWorld.vue传入了一个msg变量\n\n######*HelloWorld.vue*\n```\n\u003ctemplate\u003e\n  \u003cdiv class=\"hello\"\u003e\n    \u003ch1\u003e{{ msg }}\u003c/h1\u003e  \u003c!--传入的msg变量在这里 --\u003e\n    \u003cp\u003e\n      For a guide and recipes on how to configure / customize this project,\u003cbr\u003e\n      check out the\n      \u003ca href=\"https://cli.vuejs.org\" target=\"_blank\" rel=\"noopener\"\u003evue-cli documentation\u003c/a\u003e.\n    \u003c/p\u003e\n    \u003ch3\u003eInstalled CLI Plugins\u003c/h3\u003e\n    \u003cul\u003e\n      \u003cli\u003e\u003ca href=\"https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel\" target=\"_blank\" rel=\"noopener\"\u003ebabel\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint\" target=\"_blank\" rel=\"noopener\"\u003eeslint\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n    \u003ch3\u003eEssential Links\u003c/h3\u003e\n    \u003cul\u003e\n      \u003cli\u003e\u003ca href=\"https://vuejs.org\" target=\"_blank\" rel=\"noopener\"\u003eCore Docs\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"https://forum.vuejs.org\" target=\"_blank\" rel=\"noopener\"\u003eForum\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"https://chat.vuejs.org\" target=\"_blank\" rel=\"noopener\"\u003eCommunity Chat\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"https://twitter.com/vuejs\" target=\"_blank\" rel=\"noopener\"\u003eTwitter\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"https://news.vuejs.org\" target=\"_blank\" rel=\"noopener\"\u003eNews\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n    \u003ch3\u003eEcosystem\u003c/h3\u003e\n    \u003cul\u003e\n      \u003cli\u003e\u003ca href=\"https://router.vuejs.org\" target=\"_blank\" rel=\"noopener\"\u003evue-router\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"https://vuex.vuejs.org\" target=\"_blank\" rel=\"noopener\"\u003evuex\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"https://github.com/vuejs/vue-devtools#vue-devtools\" target=\"_blank\" rel=\"noopener\"\u003evue-devtools\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"https://vue-loader.vuejs.org\" target=\"_blank\" rel=\"noopener\"\u003evue-loader\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"https://github.com/vuejs/awesome-vue\" target=\"_blank\" rel=\"noopener\"\u003eawesome-vue\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  name: 'HelloWorld',\n  props: {\n    msg: String\n  }\n}\n\u003c/script\u003e\n\n\u003c!-- Add \"scoped\" attribute to limit CSS to this component only --\u003e\n\u003cstyle scoped\u003e\nh3 {\n  margin: 40px 0 0;\n}\nul {\n  list-style-type: none;\n  padding: 0;\n}\nli {\n  display: inline-block;\n  margin: 0 10px;\n}\na {\n  color: #42b983;\n}\n\u003c/style\u003e\n```\n\n######*main.js*\n```\nimport Vue from 'vue'\nimport App from './App.vue'\n\nVue.config.productionTip = false\n\nnew Vue({\n  render: h =\u003e h(App),\n}).$mount('#app')\n```\nrender: h =\u003e h(App)这句话的意思是创建 App element\n就是下面这个函数的意思\n```\nrender: function (createElement) {\n    return createElement(App);\n}\n```\n#####2.3 修改文件名称\n\nApp.vue改为index.vue;\nmain.js改为index.js\n\n#####2.4 修改文件内容\n\n######*index.vue*\n```\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cimg alt=\"Vue logo\" src=\"../../assets/logo.png\"\u003e 修改这里\n    \u003cHelloWorld msg=\"Welcome to Your Vue.js App\"/\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport HelloWorld from './HelloWorld.vue'  修改这里\n\nexport default {\n  name: 'app',\n  components: {\n    HelloWorld\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle\u003e\n#app {\n  font-family: 'Avenir', Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n\u003c/style\u003e\n\n```\n\n######*index.js*\n\n```\nimport Vue from 'vue'\nimport App from './index.vue'  修改这里\n\nVue.config.productionTip = false\n\nnew Vue({\n  render: h =\u003e h(App),\n}).$mount('#app')\n```\n\n##3 配置vue.config.js\n在src文件夹同一级目录添加一个名为vue.config.js的js文件。\n![添加vue.config.js.png](https://upload-images.jianshu.io/upload_images/9915084-302f816a0e16402d.png)\n\n内容如下：\n```\nmodule.exports = {\n    publicPath: '/',\n    outputDir: 'dist',\n    assetsDir: 'assets',\n    indexPath: 'index.html',\n    filenameHashing:true,\n    pages: {\n        index: {\n            entry: \"./src/pages/index/index.js\", // 配置入口js文件\n            template: \"./src/pages/index/index.html\", // 主页面\n            filename: \"index.html\", // 打包后的html文件名称\n            title: \"首页\", // 打包后的.html中\u003ctitle\u003e标签的文本内容\n            // 在这个页面中包含的块，默认情况下会包含\n            // 提取出来的通用 chunk 和 vendor chunk。\n            chunks: ['chunk-vendors', 'chunk-common', 'index']\n        }\n        },\n}\n```\n\n具体配置请查看[官方文档](https://cli.vuejs.org/zh/config/#vue-config-js)\n\n启动 npm run serve\n这时候可以重新打开首页。\n我们做到这里就完成了首页页面配置。\n\n##4 新增一个页面\n新增一个页面，随便取个名字 baicai\n在pages文件夹下新增一个baicai文件夹\n在白菜文件夹下新建几个文件\n```\nbaicai.html\nbaicai.vue\nbaicai.js\n```\n![新增baicai.jpg](https://upload-images.jianshu.io/upload_images/9915084-549b9008b7934c87.jpg)\n\n编辑文件内容\n\n######*baicai.html*\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\"\u003e\n    \u003clink rel=\"icon\" href=\"\u003c%= BASE_URL %\u003efavicon.ico\"\u003e\n    \u003ctitle\u003ebaicai\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cnoscript\u003e\n      \u003cstrong\u003eWe're sorry but templates doesn't work properly without JavaScript enabled. Please enable it to continue.\u003c/strong\u003e\n    \u003c/noscript\u003e\n    \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n    \u003c!-- built files will be auto injected --\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n######*baicai.vue*\n```\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cimg alt=\"Vue logo\" src=\"../../assets/logo.png\"\u003e\n    \u003ch1\u003e一颗数据小白菜\u003c/h1\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  name: 'app',\n}\n\u003c/script\u003e\n\n\u003cstyle\u003e\n#app {\n  font-family: 'Avenir', Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n\u003c/style\u003e\n```\n\n######*baicai.js*\n```\nimport Vue from 'vue'\nimport App from './baicai.vue'\n\nVue.config.productionTip = false\n\nnew Vue({\n  render: h =\u003e h(App),\n}).$mount('#app')\n```\n\n##5 配置router\n在src下创建router文件夹，在router文件夹下创建router.js\n修改内容为：\n```\nimport Vue from 'vue'\nimport Router from 'vue-router'\n\nimport index from '../pages/index/index.vue';\nimport baicai from '../pages/baicai/baicai.vue';\n\nVue.use(Router);\n\nconst routers = [\n    {\n        path: '/',\n        redirect: '/index',\n        component: index,\n        meta: {requiresAuth: false}\n    },\n    {\n        path: '/index',\n        name: 'index',\n        component: index,\n        meta: { requiresAuth: false },\n    },\n    {\n        path: '/baicai',\n        name: 'baicai',\n        component: baicai,\n        meta: { requiresAuth: false },\n    },\n];\nconst router = new Router({\n    mode: 'history',\n    routers,\n});\n\nexport default router;\n```\n## 6 定义vue.config.js\n如果只增加了前面几步，访问是可以，但页面不会生效，还需要定义全局使该页生效。\n回到项目的根目录，打开vue.config.js，增加baicai一段资源引用，完整代码如下：\n```\nmodule.exports = {\n    publicPath: '/',\n    outputDir: 'dist',\n    assetsDir: 'assets',\n    indexPath: 'index.html',\n    filenameHashing:true,\n    pages: {\n        index: {\n            entry: \"./src/pages/index/index.js\", // 配置入口js文件\n            template: \"./src/pages/index/index.html\", // 主页面\n            filename: \"index.html\", // 打包后的html文件名称\n            title: \"首页\", // 打包后的.html中\u003ctitle\u003e标签的文本内容\n            // 在这个页面中包含的块，默认情况下会包含\n            // 提取出来的通用 chunk 和 vendor chunk。\n            chunks: ['chunk-vendors', 'chunk-common', 'index']\n        },\n        baicai: {//新增的部份\n            entry: \"./src/pages/baicai/baicai.js\", // 配置入口js文件\n            template: \"./src/pages/baicai/baicai.html\", // 主页面\n            filename: \"baicai.html\", // 打包后的html文件名称\n            title: \"首页\", // 打包后的.html中\u003ctitle\u003e标签的文本内容\n            // 在这个页面中包含的块，默认情况下会包含\n            // 提取出来的通用 chunk 和 vendor chunk。\n            chunks: ['chunk-vendors', 'chunk-common', 'baicai']\n        },\t\t\n        },\n}\n```\n\n## 7 重启服务\n打开http://localhost:8080/baicai\n\n![baicai.png](https://upload-images.jianshu.io/upload_images/9915084-0794958806c3b222.png)\n\n## 8 首页跳转\n\n修改index文件夹下的 index.vue\n\n```\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cimg alt=\"Vue logo\" src=\"../../assets/logo.png\"\u003e\n      \u003cdiv\u003e\n        \u003ca href=\"baicai.html\"\u003e跳转到白菜页面\u003c/a\u003e 修改这里\n      \u003c/div\u003e\n    \u003cHelloWorld msg=\"Welcome to Your Vue.js App\"/\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport HelloWorld from './HelloWorld.vue'\n\nexport default {\n  name: 'app',\n  components: {\n    HelloWorld\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle\u003e\n#app {\n  font-family: 'Avenir', Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n\u003c/style\u003e\n```\n\n重启服务，打开http://localhost:8080\n![跳转到白菜页面.png](https://upload-images.jianshu.io/upload_images/9915084-c6095d7f8e316b2b.png)\n\n点击跳转到白菜页面\n就会跳转到http://localhost:8080/baicai.html\n![一颗数据小白菜.png](https://upload-images.jianshu.io/upload_images/9915084-46cd8d909f44a9b2.png)\n\n\n最后运行npm run bulid编译，最后结构如下所示：\n![最后发布出来的格式](https://upload-images.jianshu.io/upload_images/21213947-39d634e7f22c3515.jpg)\n\n## 9 总结\n手工多页面配置其实就是2个步骤：\n1、配置vue.config.js中的pages\n2、配置router\n\n注：此文有参照引用[https://www.jianshu.com/p/3a27c5c4da18](https://www.jianshu.com/p/3a27c5c4da18)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzoomla%2Fvue-cli4-multipage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzoomla%2Fvue-cli4-multipage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzoomla%2Fvue-cli4-multipage/lists"}