vue多页面应用MPA

与单页面应用（SPA）只有一个 index.html 不同，MPA 要求每个页面都有自己独立的 HTML 入口文件和 JS 入口文件。以下是一个具体的工程化实战例子：

1，在 src 目录下创建一个 pages 文件夹，将每个页面的入口独立存放：
pages -> about->index.html 以及 main.js

index.html

html 复制代码

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="Cache" content="no-cache" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-control" content="no-cache" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="force-rendering" content="webkit" />
    <meta name="google" content="notranslate" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />

    <link rel="Bookmark" href="static/favorite.ico" />
    <link
      rel="shortcut icon"
      type="image/x-icon"
      media="screen"
      href="static/favorite.ico"
    />
    <link
      rel="stylesheet"
      href="static/external/normalize/8.0.1/normalize.min.css"
    />
    <link rel="stylesheet" href="static/external/element-ui/index.css" />
    <link
      rel="stylesheet"
      href="static/external/animate.css/4.1.0/animate.min.css"
    />
    <link
      rel="stylesheet"
      href="static/external/hover.css/2.3.2/hover-min.css"
    />
    <link
      rel="stylesheet"
      href="static/external/font-awesome/5.11.2/css/font-awesome.min.css"
    />
    <title>模块预览</title>
  </head>

  <body>
    <div id="app"></div>
    <script src="static/external/vue/<%= process.env.NODE_ENV==='development' ? 'vue.js' : 'vue.min.js' %>"></script>
    <script src="static/external/vuex/vuex.min.js"></script>
    <script src="static/external/vue-router/vue-router.min.js"></script>
    <script src="static/external/axios/axios.min.js"></script>
    <script src="static/external/dayjs/1.9.7/dayjs.min.js"></script>
    <script src="static/external/dayjs/1.9.7/zh-cn.js"></script>
    <script src="static/external/jquery/jquery.min.js"></script>
    <script src="static/external/element-ui/index.js"></script>
    <script src="static/config/system.js"></script>
    <script
      type="text/javascript"
      src="static/external/tinymce/tinymce.min.js"
    ></script>
    <script>
      dayjs.locale('zh-cn')
    </script>
  </body>
</html>

main.js

javascript 复制代码

import '@/assets/index.scss'
import Vue from 'vue'
import Zujian from 'zujianku'
import store from '@/store'
import { apiHelper } from 'vue-x-axios'
import { requestConfig } from '@/config'
import yemiandaima from '@/views/yemiandaima/index.vue'

Vue.config.productionTip = false
Vue.prototype.$ELEMENT = { size: 'mini' }
Vue.use(Zujian)

apiHelper.register(requestConfig).then(() => {
  new Vue({
    store,
    render: h => h(yemiandaima)
  }).$mount('#app')
})

2，配置：vue.config.js

声明所有的 HTML 入口文件路径：

javascript 复制代码

const { defineConfig } = require('...')

module.exports = defineConfig({
  pages: {
    index: {
      entry: 'src/main.js'
    },
    'about': {
      name: 'about',
      template: 'src/pages/about/index.html',
      entry: 'src/pages/about/main.js',
      filename: 'about.html'
    }
  },
  // webpack配置
  chainWebpack: config => {...}
})

最终打包后的 dist 目录会生成多个独立的 HTML 文件（如 index.html、about.html）