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

2.調整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')

3.調整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

4.在項目根目錄下增加 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/' // 代理
  }
};

簡單的例子

項目地址傳送

以上就是本次分享。