vue多页面实现路由

vue多页面实现路由的方法

在Vue中实现多页面应用（MPA）路由，通常需要结合Webpack配置和Vue Router。以下是具体实现方式：

配置多入口Webpack

修改vue.config.js文件，为每个页面设置独立入口：

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

为每个页面创建独立Vue实例

每个页面目录下需要包含完整的Vue应用结构：

src/pages/page1/
├── App.vue
├── main.js
└── router.js

配置页面级路由

在每个页面的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
    }
  ]
})

页面间跳转处理

使用常规HTML链接或window.location进行页面间跳转：

<a href="/page1.html">跳转页面1</a>
<a href="/page2.html">跳转页面2</a>

开发环境配置调整

修改开发服务器配置以支持多页面访问：

devServer: {
  historyApiFallback: {
    rewrites: [
      { from: /\/page1/, to: '/page1.html' },
      { from: /\/page2/, to: '/page2.html' }
    ]
  }
}

生产环境构建优化

添加公共代码抽取配置减少重复打包：

configureWebpack: {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        }
      }
    }
  }
}

静态资源路径处理

确保静态资源路径正确：

publicPath: process.env.NODE_ENV === 'production'
  ? '/your-project-name/'
  : '/'

注意事项

每个页面都是独立的Vue应用，无法共享Vuex状态 页面间通信需要通过URL参数、localStorage或postMessage实现 需要考虑SEO优化时，建议使用预渲染或服务端渲染方案