Vue是一個(gè)JavaScript框架，可以用于創(chuàng)建單頁面應(yīng)用程序（SPA）和多頁面應(yīng)用程序（MPA）。對于MPA，Vue可以配置多個(gè)頁面，每個(gè)頁面都有自己的入口文件，路由和頁面相關(guān)的組件。下面介紹如何在Vue中進(jìn)行多頁面配置。

首先需要在項(xiàng)目目錄下創(chuàng)建src/pages目錄，用于存放多個(gè)頁面的入口文件。例如，創(chuàng)建一個(gè)名為home的目錄，并在其中創(chuàng)建一個(gè)名為index.js的文件，作為home頁面的入口文件。index.js中需要導(dǎo)入Vue并定義Vue實(shí)例，如下所示：

import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h =>h(App),
}).$mount('#app')

接下來，需要在項(xiàng)目根目錄下的webpack.config.js中配置多個(gè)入口文件。如下所示，使用glob模塊獲取src/pages目錄下的所有入口文件，然后使用webpack的entry屬性配置多個(gè)入口文件，將入口文件名作為entry屬性的key：

const path = require('path')
const glob = require('glob')
module.exports = {
// ...
entry: glob.sync('./src/pages/**/index.js').reduce((acc, path) =>{
const entryName = path.match(/\.\/src\/pages\/(.*)\/index\.js/)[1]
acc[entryName] = path
return acc
}, {}),
// ...
}

然后需要為每個(gè)入口文件配置對應(yīng)的HTML模板文件，在webpack中使用html-webpack-plugin插件實(shí)現(xiàn)。如下所示，使用glob模塊獲取src/pages目錄下的所有HTML模板文件，然后使用html-webpack-plugin插件生成多個(gè)HTML文件：

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// ...
plugins: glob.sync('./src/pages/**/index.html').map((path) =>{
const entryName = path.match(/\.\/src\/pages\/(.*)\/index\.html/)[1]
return new HtmlWebpackPlugin({
filename: `${entryName}.html`,
template: path,
chunks: [entryName],
})
}),
// ...
}

在Vue項(xiàng)目的路由配置中，需要為每個(gè)頁面定義一個(gè)路由，如下所示：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './pages/home/App.vue'
import About from './pages/about/App.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/about',
name: 'About',
component: About,
},
],
})

最后，在Vue中使用多個(gè)入口文件和HTML文件啟動(dòng)開發(fā)服務(wù)器和構(gòu)建打包命令即可。啟動(dòng)開發(fā)服務(wù)器的命令為：

$ npm run serve

構(gòu)建打包命令為：

$ npm run build

以上就是Vue多個(gè)頁面配置的完整流程，通過配置多個(gè)入口文件和HTML文件，可以在Vue中實(shí)現(xiàn)多個(gè)頁面的開發(fā)和打包。