面试题：Vue多页面应用开发中，Vue CLI如何配置不同页面的入口文件？

Question

在使用Vue CLI进行多页面应用开发时，通常需要为每个页面配置单独的入口文件。请描述在Vue CLI项目中，具体通过哪些步骤和配置来实现为不同页面设置各自的入口文件，并且说明入口文件的作用和结构。

Answer 1

实现步骤和配置

1. 项目结构调整：在项目根目录下创建一个 src 文件夹（若不存在），在 src 下再创建多个文件夹，每个文件夹对应一个页面，例如 src/page1、src/page2 等。
2. 入口文件创建：在每个页面文件夹内创建 main.js 作为入口文件。例如 src/page1/main.js，src/page2/main.js 等。
3. 配置 vue.config.js：在项目根目录创建 vue.config.js 文件（若不存在），配置如下：

module.exports = {
  pages: {
    page1: {
      entry: 'src/page1/main.js',
      template: 'public/index.html',
      filename: 'page1.html',
      title: 'Page 1',
      chunks: ['chunk-vendors', 'chunk-common', 'page1']
    },
    page2: {
      entry: 'src/page2/main.js',
      template: 'public/index.html',
      filename: 'page2.html',
      title: 'Page 2',
      chunks: ['chunk-vendors', 'chunk-common', 'page2']
    }
  }
}

上述配置中，entry 指向每个页面的入口文件，template 是模板文件（一般使用 public/index.html），filename 是生成的 HTML 文件名，title 是页面标题，chunks 表示该页面所包含的代码块。

入口文件的作用

1. 启动Vue应用：入口文件是Vue应用程序启动的起点，它负责创建Vue实例，并挂载到指定的DOM元素上。
2. 引入全局资源：可以在入口文件中引入全局的样式、插件、组件等，使整个应用都能使用这些资源。例如引入全局CSS样式、Vue Router、Vuex等。

入口文件的结构

1. 引入Vue：首先要引入Vue库，例如 import Vue from 'vue'。
2. 创建Vue实例：使用 new Vue() 创建Vue实例，并进行相关配置，如 new Vue({ el: '#app', render: h => h(App) })，其中 el 是挂载的DOM元素，render 函数用于渲染根组件。
3. 引入根组件：引入应用的根组件，如 import App from './App.vue'，然后在 render 函数中使用该根组件进行渲染。
4. 引入其他全局资源：若有全局资源，如全局样式 import './styles/global.css'，或插件如 import router from './router' 并在Vue实例中使用，如 new Vue({ el: '#app', router, render: h => h(App) })。