vue实现多个页面

Vue 实现多页面应用的方法

使用 Vue 实现多页面应用（MPA）需要配置多个入口文件，每个入口对应一个独立的 HTML 页面。以下是具体实现步骤：

配置多入口

修改 vue.config.js 文件，设置多个入口点：

module.exports = {
  pages: {
    index: {
      entry: 'src/pages/index/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    },
    about: {
      entry: 'src/pages/about/main.js',
      template: 'public/about.html',
      filename: 'about.html'
    }
  }
}

创建页面目录结构

在 src 目录下为每个页面创建独立文件夹：

src/
  pages/
    index/
      main.js
      App.vue
      components/
    about/
      main.js
      App.vue
      components/

配置路由

每个页面可以有自己的路由配置：

// src/pages/about/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

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

构建优化

添加代码分割配置避免公共代码重复加载：

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
        minSize: 10000,
        maxSize: 250000
      }
    }
  }
}

开发环境配置

确保开发服务器能正确加载多页面：

devServer: {
  historyApiFallback: {
    rewrites: [
      { from: /^\/index/, to: '/index.html' },
      { from: /^\/about/, to: '/about.html' }
    ]
  }
}

生产环境部署

构建后会生成多个 HTML 文件：

dist/
  index.html
  about.html
  js/
  css/
  img/

注意事项

1. 每个页面是独立的 Vue 应用实例
2. 页面间共享代码可通过提取公共组件或库实现
3. 页面跳转需要使用传统链接方式而非 Vue Router
4. 静态资源路径需要正确配置

这种方法适合需要完全独立页面的场景，如营销落地页、后台管理系统等。如需保持部分共享状态，可考虑微前端架构方案。