vue如何搭建多页面多系统应用

要搭建多页面多系统应用，我们需要考虑以下几个方面：

1. 如何配置webpack多入口
2. 如何分别打包多个页面
3. 如何创建多个vue实例
4. 如何在不同的页面中加载不同的组件

下面我们逐一讲解：

1. 如何配置webpack多入口

我们可以在webpack.config.js中配置entry来指定多个入口文件，示例代码如下：

module.exports = {
  entry: {
    'page1': './src/page1.js',
    'page2': './src/page2.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }
}

上面的示例中，我们指定了两个入口文件：page1.js和page2.js，并且指定了输出的文件名为[name].js（这里的[name]会根据entry配置中的key自动替换）。

2. 如何分别打包多个页面

在打包时，我们需要分别打包不同的页面，我们可以使用html-webpack-plugin插件来实现。示例代码如下：

plugins: [
  new HtmlWebpackPlugin({
    filename: 'page1.html',
    template: 'src/page1.html',
    chunks: ['page1']
  }),
  new HtmlWebpackPlugin({
    filename: 'page2.html',
    template: 'src/page2.html',
    chunks: ['page2']
  })
]

上面的示例中，我们使用了HtmlWebpackPlugin插件，并且分别指定了要生成的页面文件名和模板文件。而chunks配置项则用来指定需要引入哪些chunk（也就是entry配置中的key）。这样每个页面就会分别引入对应的js文件。

3. 如何创建多个vue实例

为了实现多个页面之间的独立管理和数据隔离，我们需要在每个页面中都创建一个独立的vue实例。示例代码如下：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

上面的代码中，我们创建了一个新的vue实例，并且指定了渲染的组件为App.vue。在实际应用中，我们可以根据需要来配置各种Vue实例选项，例如vuex、vue-router等。

4. 如何在不同的页面中加载不同的组件

在多个页面中，我们可以根据需要加载不同的组件，这可以通过配置router来实现。示例代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Page1 from './components/Page1.vue'
import Page2 from './components/Page2.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/page1', component: Page1 },
    { path: '/page2', component: Page2 }
  ]
})

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

上面的代码中，我们使用了vue-router插件来实现路由功能，并且根据需要配置了两个路由：/page1和/page2，分别对应不同的组件。在实际应用中，我们也可以使用其他的组件加载方式，例如动态组件、异步组件等。

通过上述步骤，我们就可以搭建出一个多页面多系统的Vue应用。同时，我们还有一些需要注意的点，例如组件和样式的命名、路由和页面的关系、全局组件的使用等等，这些都需要根据实际情况来进行调整和优化。