vue如何实现多页面

Vue 实现多页面应用的方法

Vue 默认是单页面应用（SPA），但通过配置可以实现多页面应用（MPA）。以下是几种常见的方法：

使用 Vue CLI 配置多页面

在 vue.config.js 中配置多个入口文件，每个入口对应一个页面。

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

每个页面需要独立的入口文件（如 main.js）和模板文件（如 index.html）。

手动配置 Webpack

如果项目直接使用 Webpack，可以通过配置多个入口和 HtmlWebpackPlugin 实现多页面。

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    index: './src/pages/index/main.js',
    page2: './src/pages/page2/main.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html',
      chunks: ['index'],
    }),
    new HtmlWebpackPlugin({
      template: './public/page2.html',
      filename: 'page2.html',
      chunks: ['page2'],
    }),
  ],
};

使用第三方插件

vue-multi-page 插件可以简化多页面配置，自动生成入口和模板。

npm install vue-multi-page --save-dev

在 vue.config.js 中配置：

const MultiPage = require('vue-multi-page');

module.exports = {
  configureWebpack: {
    plugins: [
      new MultiPage({
        pages: ['index', 'page2'],
        template: 'public/index.html',
      }),
    ],
  },
};

路由配置

多页面应用通常不需要 Vue Router，但若需要在单个页面内实现路由，可以单独为每个页面配置路由。

// src/pages/index/router.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
  ],
});

静态资源处理

多页面应用的静态资源需按页面组织，避免冲突。建议将资源放在各自页面的目录下。

src/
  pages/
    index/
      assets/
      views/
      main.js
    page2/
      assets/
      views/
      main.js

开发与构建

开发时通过 npm run serve 启动所有页面，构建时 npm run build 会生成多个 HTML 文件。

npm run serve
npm run build

注意事项

• 多页面应用会增加构建复杂度，需确保每个页面的依赖和配置正确。
• 共享的依赖（如 Vue 库）可以通过 Webpack 的 splitChunks 优化。
• 页面间的跳转需使用 <a> 标签或 window.location，而非 Vue Router。

通过以上方法，可以灵活地在 Vue 中实现多页面应用。