vue/cli3 创建多页面项目

场景

日常工作中，经常会遇到需要做一些小功能页面，但是相互没有太大的关系，
单独启一个项目觉得太麻烦，这时我们可以把这些功能集合到vue项目中，配置成一个多入口项目。
本文就是介绍基于这种思路，配置vue的多页面项目。

安装

全局安装@vue/cli 的npm包

npm install -g @vue/cli
# OR
yarn global add @vue/cli

创建项目

vue create my-app

根据自己开发习惯配置项目

调整项目结构及文件

1. 将src文件结构调整如下

.
├── App.vue
├── assets
│   └── logo.png
├── components
│   └── HelloWorld.vue
└── pages // pages下面的每个子文件夹就是一个小功能项目
    ├── pageA
    │   ├── main.js
    │   ├── router.js
    │   ├── store.js
    │   └── views
    │       ├── About.vue
    │       └── Home.vue
    └── pageB
        ├── main.js
        ├── router.js
        ├── store.js
        └── views
            ├── About.vue
            └── Home.vue

1. 调整main.js

import Vue from 'vue'
import App from '../../App.vue' // 修改路径
import router from './router'
import store from './store'

Vue.config.productionTip = false

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

1. 调整router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue' // 修改路径

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

1. 在项目根目录下增加 vue.config.js 配置文件

module.exports = {
  pages: {
    pageA: {
      entry: 'src/pages/pageA/main.js',
      template: 'src/pages/pageA/index.html',
      filename: 'pageA.html',
    },
    pageB: {
      entry: 'src/pages/pageB/main.js',
      template: 'src/pages/pageB/index.html',
      filename: 'pageB.html',
    },
  },
  devServer: {
    // open: true, //是否默认打开
    // index: '/pageA.html', // 是否默认打开 pageA
    // proxy: 'http://localhost:8090/' // 代理
  }
};

至此，我们就简单的配置了 @vue/cli 的多页面项目了，
可以运行 npm run serve查看结果。
pageA访问地址: 'http://localhost:8080/pageA.html#/'
pageB访问地址: 'http://localhost:8080/pageB.html#/'

自动生成pages

为了能不每次增加功能页面都去修改vue.config.js 配置文件，
我们使用node-glob工具。glob工具使用 * 等符号, 来写一个glob规则, 像在shell里一样,获取匹配对应规则的文件。glob工具基于javascript，它使用了 minimatch 库来进行匹配。

npm i glob -S

然后修改 vue.config.js 配置文件

var glob = require("glob")

function getPagesInfo(){
  let pages = {}
  glob.sync('src/pages/**/main.js').map(entry => {
    let title = entry.slice(10, -8)
    pages[title] = {
      entry,
      template: `${entry.slice(0, -8)}/index.html`,
      filename: `${title}.html`,
    }
  })
  return pages
}

module.exports = {
  pages: getPagesInfo(),
  devServer: {
    // open: true, //是否默认打开
    // index: '/pageA.html', // 是否默认打开 pageA
    // proxy: 'http://localhost:8090/' // 代理
  }
};

简单的例子

项目地址传送

以上就是本次分享。