├── .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 |
108 |
109 | 我是pc端首页
110 |
111 |
112 |
113 |
122 | ```
123 |
124 | - `src/views_mobile/Home.vue`
125 |
126 | ```vue
127 |
128 |
129 | 我是移动端首页
130 |
131 |
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 |
2 |
3 |
4 |
5 |
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 |
2 |
3 |
{{ msg }}
4 |
5 | For a guide and recipes on how to configure / customize this project,
6 | check out the
7 | vue-cli documentation.
8 |
9 |
Installed CLI Plugins
10 |
15 |
Essential Links
16 |
23 |
Ecosystem
24 |
31 |
32 |
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 |
2 |
3 | 我是移动端首页
4 |
5 |
6 |
7 |
12 |
13 |
16 |
--------------------------------------------------------------------------------
/src/views_pc/Home.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | 我是pc端首页
4 |
5 |
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 |
--------------------------------------------------------------------------------