vue多页面开发配置

sifu in 南昌

2021-03-11 Thursday

了解更多: vue部署nginx配置

# 一、多页面开发适用场景

在开发前端的时候，有时候会要开发一套pc端的系统，同时需要开发一套移动端系统，而两套系统功能差不多，但是又无法通过 css的媒体查询做两端适配，只能通过创建两个项目来开发两套相似的系统。这就导致了一个问题---需要通过复制来保持两个项目公共部分的接口或者模块代码保持一致，如果改了一个地方，又要再去修改另外一个项目中的文件，极其麻烦。

还有一种办法是，在同一个vue项目中的同一个路由对象中即配置pc端的路由，又配置移动端路由。但是打包出来之后，访问pc端页面，又附带了移动端的页面文件，导致服务器的访问资源的浪费（虽然可通过懒加载解决，但难免有些不优雅）。同时，如果在编写代码时控制不好，也可能出现pc端和移动端的css样式污染的问题。

这时就需要用到vue多页面开发来解决这个问题。

# 二、如何配置

# 1、创建`vue.config.js`，并配置相关必要配置

// vue.config.js

module.exports = {
    pages: {
        pc: {
            // page 的入口
            entry: 'src/entry/pc.js',
            // 模板来源
            template: 'public/pc.html',
            // 在 dist/index.html 的输出
            filename: 'pc.html',
            // 当使用 title 选项时，
            // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: '环保在线监测云平台',
            chunks: ['chunk-vendors', 'chunk-common', 'pc']
        },
        mobile: {
            // page 的入口
            entry: 'src/entry/mobile.js',
            // 模板来源
            template: 'public/mobile.html',
            // 在 dist/index.html 的输出
            filename: 'mobile.html',
            // 当使用 title 选项时，
            // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: '环保在线监测云平台',
            chunks: ['chunk-vendors', 'chunk-common', 'mobile']
        },
    },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 2、创建两个模板文件

public/pc.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

public/moble.html

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 2、创建两个路由页面

src/views_pc/Home.vue

<template>
  <div>
      我是pc端首页
  </div>
</template>

<script>


export default {
  name: 'Home',
  components: {
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

src/views_mobile/Home.vue

<template>
    <div>
        我是移动端首页
    </div>
</template>

<script>
export default {
    name: "Home",
}
</script>

<style scoped>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 3、创建两个路由

src/router/pc/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../../views_pc/Home')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: '/pc',
  routes
})

export default router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

src/router/mobile/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'Home',
        component: () => import('../../views_mobile/Home')
    }
]

const router = new VueRouter({
    mode: 'history',
    base: '/mobile',
    routes
})

export default router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 4、创建两个入口文件

src/entry/pc.js

import Vue from 'vue'
import App from '../App.vue'
import router from '../router/pc'
import store from '../store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12

src/entry/mobile.js

import Vue from 'vue'
import App from '../App.vue'
import router from '../router/mobile'
import store from '../store'

Vue.config.productionTip = false

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12

# 三、如何访问

项目启动后，浏览器打开

http://localhost:8080/pc 访问pc端路由页面
http://localhost:8080/mobile 访问移动端路由页面

# 四、部署

部署根据不同的路由模式，部署方式也有不同，同时访问的路径也有差异

# 1、`hash` 模式

nginx 无需配置

访问地址：

pc端：http://example.com/pc.html#/
移动端：http://example.com/mobile.html#/

# 2、`history` 模式

nginx 配置

# 精准匹配 '/' 重定向到pc页面，即访问pc.html文件
location = / {
  rewrite / /pc permanent;
}
# 匹配以 '/pc' 开头，访问pc.html文件
location ^~ /pc {
  try_files $uri $uri/ /pc.html;
}
# 匹配以 '/mobile' 开头，访问mobile.html文件
location ^~ /mobile {
  try_files $uri $uri/ /mobile.html;
}

1
2
3
4
5
6
7
8
9
10
11
12

访问地址：

pc端：http://example.com/pc
移动端：http://example.com/mobile

# 五、示例项目GitHub地址

# 1、vue-cli + vue2示例代码

https://github.com/Gitsifu/vue-multiple-page (opens new window)

# 2、vite + vue3示例代码

https://github.com/Gitsifu/vite-multipage (opens new window)

# 一、多页面开发适用场景

# 二、如何配置

# 1、创建vue.config.js，并配置相关必要配置

# 2、创建两个模板文件

# 2、创建两个路由页面

# 3、创建两个路由

# 4、创建两个入口文件

# 三、如何访问

# 四、部署

# 1、hash 模式

# 2、history 模式

# 五、示例项目GitHub地址

# 1、vue-cli + vue2示例代码

# 2、vite + vue3示例代码

# 1、创建`vue.config.js`，并配置相关必要配置

# 1、`hash` 模式

# 2、`history` 模式