├── .browserslistrc ├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── mobile.html └── pc.html ├── src ├── App.vue ├── assets │ └── logo.png ├── components │ └── HelloWorld.vue ├── entry │ ├── mobile.js │ └── pc.js ├── router │ ├── mobile │ │ └── index.js │ └── pc │ │ └── index.js ├── store │ └── index.js ├── views_mobile │ └── Home.vue └── views_pc │ └── Home.vue └── vue.config.js /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue多页面开发配置 2 | 3 | > 原文链接：[vue多页面开发配置](https://gitsifu.github.io/guide/vue%E5%A4%9A%E9%A1%B5%E9%9D%A2%E5%BC%80%E5%8F%91%E9%85%8D%E7%BD%AE/) 4 | 5 | > 国内镜像：[vue多页面开发配置](https://sifu.gitee.io/blog/guide/) 6 | 7 | ## 一、多页面开发适用场景 8 | 9 | 在开发前端的时候，有时候会要开发一套pc端的系统，同时需要开发一套移动端系统，而两套系统功能差不多，但是又无法通过 10 | css的媒体查询做两端适配，只能通过创建两个项目来开发两套相似的系统。这就导致了一个问题---需要通过 11 | 复制来保持两个项目公共部分的接口或者模块代码保持一致，如果改了一个地方，又要再去修改另外一个项目中的文件， 12 | 极其麻烦。 13 | 14 | 还有一种办法是，在同一个vue项目中的同一个路由对象中即配置pc端的路由，又配置移动端路由。但是打包出来之后， 15 | 访问pc端页面，又附带了移动端的页面文件，导致服务器的访问资源的浪费。同时，如果在编写代码时控制不好，也可能出现 16 | pc端和移动端的css样式污染的问题。 17 | 18 | 这时就需要用到vue多页面开发来解决这个问题。 19 | 20 | ## 二、如何配置 21 | 22 | ### 1、创建`vue.config.js`，并配置相关必要配置 23 | 24 | ```javascript 25 | // vue.config.js 26 | 27 | module.exports = { 28 | pages: { 29 | pc: { 30 | // page 的入口 31 | entry: 'src/entry/pc.js', 32 | // 模板来源 33 | template: 'public/pc.html', 34 | // 在 dist/index.html 的输出 35 | filename: 'pc.html', 36 | // 当使用 title 选项时， 37 | // template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.title %> 38 | title: '环保在线监测云平台', 39 | chunks: ['chunk-vendors', 'chunk-common', 'pc'] 40 | }, 41 | mobile: { 42 | // page 的入口 43 | entry: 'src/entry/mobile.js', 44 | // 模板来源 45 | template: 'public/mobile.html', 46 | // 在 dist/index.html 的输出 47 | filename: 'mobile.html', 48 | // 当使用 title 选项时， 49 | // template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.title %> 50 | title: '环保在线监测云平台', 51 | chunks: ['chunk-vendors', 'chunk-common', 'mobile'] 52 | }, 53 | }, 54 | } 55 | ``` 56 | ### 2、创建两个模板文件 57 | 58 | - `public/pc.html` 59 | 60 | ```html 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | <%= htmlWebpackPlugin.options.title %> 69 | 70 | 71 | 74 |
75 | 76 | 77 | 78 | ``` 79 | 80 | - `public/moble.html` 81 | 82 | ```html 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | <%= htmlWebpackPlugin.options.title %> 91 | 92 | 93 | 96 |
97 | 98 | 99 | 100 | ``` 101 | 102 | ### 2、创建两个路由页面 103 | 104 | - `src/views_pc/Home.vue` 105 | 106 | ```vue 107 | 112 | 113 | 122 | ``` 123 | 124 | - `src/views_mobile/Home.vue` 125 | 126 | ```vue 127 | 132 | 133 | 138 | 139 | 142 | 143 | ``` 144 | 145 | ### 3、创建两个路由 146 | 147 | - `src/router/pc/index.js` 148 | 149 | ```javascript 150 | import Vue from 'vue' 151 | import VueRouter from 'vue-router' 152 | 153 | Vue.use(VueRouter) 154 | 155 | const routes = [ 156 | { 157 | path: '/', 158 | name: 'Home', 159 | component: () => import('../../views_pc/Home') 160 | } 161 | ] 162 | 163 | const router = new VueRouter({ 164 | mode: 'history', 165 | base: '/pc', 166 | routes 167 | }) 168 | 169 | export default router 170 | ``` 171 | 172 | - `src/router/mobile/index.js` 173 | 174 | ```javascript 175 | import Vue from 'vue' 176 | import VueRouter from 'vue-router' 177 | 178 | Vue.use(VueRouter) 179 | 180 | const routes = [ 181 | { 182 | path: '/', 183 | name: 'Home', 184 | component: () => import('../../views_mobile/Home') 185 | } 186 | ] 187 | 188 | const router = new VueRouter({ 189 | mode: 'history', 190 | base: '/mobile', 191 | routes 192 | }) 193 | 194 | export default router 195 | ``` 196 | 197 | ### 4、创建两个入口文件 198 | 199 | - `src/entry/pc.js` 200 | 201 | ```javascript 202 | import Vue from 'vue' 203 | import App from '../App.vue' 204 | import router from '../router/pc' 205 | import store from '../store' 206 | 207 | Vue.config.productionTip = false 208 | 209 | new Vue({ 210 | router, 211 | store, 212 | render: h => h(App) 213 | }).$mount('#app') 214 | ``` 215 | 216 | - `src/entry/mobile.js` 217 | 218 | ```javascript 219 | import Vue from 'vue' 220 | import App from '../App.vue' 221 | import router from '../router/mobile' 222 | import store from '../store' 223 | 224 | Vue.config.productionTip = false 225 | 226 | new Vue({ 227 | router, 228 | store, 229 | render: h => h(App) 230 | }).$mount('#app') 231 | ``` 232 | 233 | ## 三、如何访问 234 | 235 | 项目启动后，浏览器打开 236 | - `http://localhost:8080/pc` 访问pc端路由页面 237 | - `http://localhost:8080/mobile` 访问移动端路由页面 238 | 239 | ## 四、部署 240 | 241 | 部署根据不同的路由模式，**部署方式也有不同，同时访问的路径也有差异** 242 | 243 | 1、`hash` 模式 244 | 245 | `nginx` 无需配置 246 | 247 | 访问地址： 248 | 249 | - pc端：http://example.com/pc.html#/ 250 | - 移动端：http://example.com/mobile.html#/ 251 | 252 | 2、`history` 模式下 `nginx` 配置 253 | 254 | ``` 255 | # 精准匹配 '/' 重定向到pc页面，即访问pc.html文件 256 | location = / { 257 | rewrite / /pc permanent; 258 | } 259 | # 匹配以 '/pc' 开头，访问pc.html文件 260 | location ^~ /pc { 261 | try_files $uri $uri/ /pc.html; 262 | } 263 | # 匹配以 '/mobile' 开头，访问mobile.html文件 264 | location ^~ /mobile { 265 | try_files $uri $uri/ /mobile.html; 266 | } 267 | ``` 268 | 269 | 访问地址： 270 | 271 | - pc端：http://example.com/pc 272 | - 移动端：http://example.com/mobile 273 | 274 | ## 五、示例项目GitHub地址 275 | 276 | github: [https://github.com/Gitsifu/vue-multiple-page](https://github.com/Gitsifu/vue-multiple-page) 277 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-multiple-page", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "core-js": "^3.6.5", 11 | "vue": "^2.6.11", 12 | "vue-router": "^3.2.0", 13 | "vuex": "^3.4.0" 14 | }, 15 | "devDependencies": { 16 | "@vue/cli-plugin-babel": "~4.5.0", 17 | "@vue/cli-plugin-router": "~4.5.0", 18 | "@vue/cli-plugin-vuex": "~4.5.0", 19 | "@vue/cli-service": "~4.5.0", 20 | "sass": "^1.26.5", 21 | "sass-loader": "^8.0.2", 22 | "vue-template-compiler": "^2.6.11" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gitsifu/vue-multiple-page/9e528bf7fe97416b4fd3a6ff807ca68c9c6ec7df/public/favicon.ico -------------------------------------------------------------------------------- /public/mobile.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /public/pc.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gitsifu/vue-multiple-page/9e528bf7fe97416b4fd3a6ff807ca68c9c6ec7df/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 42 | 43 | 44 | 60 | -------------------------------------------------------------------------------- /src/entry/mobile.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from '../App.vue' 3 | import router from '../router/mobile' 4 | import store from '../store' 5 | 6 | Vue.config.productionTip = false 7 | 8 | new Vue({ 9 | router, 10 | store, 11 | render: h => h(App) 12 | }).$mount('#app') 13 | -------------------------------------------------------------------------------- /src/entry/pc.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from '../App.vue' 3 | import router from '../router/pc' 4 | import store from '../store' 5 | 6 | Vue.config.productionTip = false 7 | 8 | new Vue({ 9 | router, 10 | store, 11 | render: h => h(App) 12 | }).$mount('#app') 13 | -------------------------------------------------------------------------------- /src/router/mobile/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | 4 | Vue.use(VueRouter) 5 | 6 | const routes = [ 7 | { 8 | path: '/', 9 | name: 'Home', 10 | component: () => import('../../views_mobile/Home') 11 | } 12 | ] 13 | 14 | const router = new VueRouter({ 15 | mode: 'history', 16 | base: '/mobile', 17 | routes 18 | }) 19 | 20 | export default router 21 | -------------------------------------------------------------------------------- /src/router/pc/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | 4 | Vue.use(VueRouter) 5 | 6 | const routes = [ 7 | { 8 | path: '/', 9 | name: 'Home', 10 | component: () => import('../../views_pc/Home') 11 | } 12 | ] 13 | 14 | const router = new VueRouter({ 15 | mode: 'history', 16 | base: '/pc', 17 | routes 18 | }) 19 | 20 | export default router 21 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | Vue.use(Vuex) 5 | 6 | export default new Vuex.Store({ 7 | state: { 8 | }, 9 | mutations: { 10 | }, 11 | actions: { 12 | }, 13 | modules: { 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /src/views_mobile/Home.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/views_pc/Home.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | pages: { 3 | pc: { 4 | // page 的入口 5 | entry: 'src/entry/pc.js', 6 | // 模板来源 7 | template: 'public/pc.html', 8 | // 在 dist/index.html 的输出 9 | filename: 'pc.html', 10 | // 当使用 title 选项时， 11 | // template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.title %> 12 | title: 'pc端', 13 | chunks: ['chunk-vendors', 'chunk-common', 'pc'] 14 | }, 15 | mobile: { 16 | // page 的入口 17 | entry: 'src/entry/mobile.js', 18 | // 模板来源 19 | template: 'public/mobile.html', 20 | // 在 dist/index.html 的输出 21 | filename: 'mobile.html', 22 | // 当使用 title 选项时， 23 | // template 中的 title 标签需要是 <%= htmlWebpackPlugin.options.title %> 24 | title: '移动端', 25 | chunks: ['chunk-vendors', 'chunk-common', 'mobile'] 26 | }, 27 | }, 28 | } 29 | --------------------------------------------------------------------------------