vue配置多页面的实现方法

关于Vue配置多页面的实现方法，下面是一个完整的攻略。

1. 安装依赖

在开始前，需要安装vue-loader和vue-template-compiler这两个依赖。

npm install vue-loader vue-template-compiler --save-dev

2. 配置webpack

在webpack配置文件中，需要做如下修改。

在entry属性中配置多个入口文件。

module.exports = {
  // 入口文件
  entry: {
    page1: './src/page1/index.js',
    page2: './src/page2/index.js',
    // ...
  },
  // ...
}

定义多个HtmlWebpackPlugin实例，每个HtmlWebpackPlugin实例为一个页面生成HTML文件。

// 生成的文件名
const filenames = Object.keys(config.entry);

// 遍历生成HTML的配置列表
const htmlPlugins = filenames.map(name => {
  return new HtmlWebpackPlugin({
    // 文件名
    filename: `${name}.html`,
    // 模板文件
    template: `./src/${name}/index.html`,
    // 入口文件
    chunks: [name],
    // 压缩选项
    minify: isPro ? {...} : false,
    // ...
  })
})

module.exports = {
  // ...
  plugins: [
    // HtmlWebpackPlugin实例
    ...htmlPlugins,
    // ...
  ]
}

3. 编写页面文件

以page1为例，页面文件目录结构如下：

src/
└── page1/
    ├── index.js
    ├── index.html
    └── App.vue

其中，index.html文件需要引入page1.js。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page1</title>
</head>
<body>
  <div id="app"></div>
  <script src="./page1.js"></script>
</body>
</html>

index.js文件中需要导入Vue，以及App.vue组件，并且将App.vue组件挂载到#app元素上。

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

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

App.vue文件中可以正常写Vue组件内容。

<template>
  <div>Hello, page1!</div>
</template>

<script>
export default {
  name: 'App'
}
</script>

4. 示例说明

假设现在我们需要开发两个页面，page1页面和page2页面。

示例1：查询页面

page1页面是一个查询页面，包含一个表单和一个查询结果列表。

在src/中新建文件夹，命名为page1，并在该文件夹中创建index.js、index.html和App.vue三个文件，具体内容见上述示例。
新建Form.vue和List.vue两个组件文件，在App.vue中引入这两个组件。

<template>
  <div>
    <Form></Form>
    <List></List>
  </div>
</template>

<script>
import Form from './Form.vue'
import List from './List.vue'

export default {
  name: 'App',
  components: { Form, List }
}
</script>

在Form.vue中编写表单内容。

<template>
  <form>
    <div>
      <label>日期</label>
      <input type="date" v-model="date">
    </div>
    <div>
      <button type="submit" @click.prevent="handleSubmit">查询</button>
    </div>
  </form>
</template>

<script>
export default {
  name: 'Form',
  data() {
    return {
      date: ''
    }
  },
  methods: {
    handleSubmit() {
      // 处理查询逻辑
    }
  }
}
</script>

在List.vue中编写查询结果列表内容。

<template>
  <table>
    <thead>
      <tr>
        <th>日期</th>
        <th>成交量</th>
        <th>价格</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="record in records" :key="record.date">
        <td>{{ record.date }}</td>
        <td>{{ record.volume }}</td>
        <td>{{ record.price }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'List',
  data() {
    return {
      records: [
        { date: '2020-01-01', volume: '100', price: '100' },
        { date: '2020-01-02', volume: '200', price: '98' },
        { date: '2020-01-03', volume: '150', price: '102' },
        // ...
      ]
    }
  }
}
</script>

在index.html中引入需要的样式文件和JS文件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page1</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <div id="app"></div>
  <script src="./page1.js"></script>
</body>
</html>

在webpack.config.js中添加css-loader和vue-style-loader配置。

module.exports = {
  module: {
    rules: [
      {
        // 处理CSS文件
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader']
      },
      // ...
    ]
  },
  // ...
}

运行npm run dev查看页面效果。

示例2：音乐播放器

page2页面是一个音乐播放器，包含音乐列表和播放控制条。

在src/中新建文件夹，命名为page2，并在该文件夹中创建index.js、index.html和App.vue三个文件，具体内容见上述示例。
新建List.vue和Controls.vue两个组件文件，在App.vue中引入这两个组件。

<template>
  <div>
    <List></List>
    <Controls></Controls>
  </div>
</template>

<script>
import List from './List.vue'
import Controls from './Controls.vue'

export default {
  name: 'App',
  components: { List, Controls }
}
</script>

在List.vue中编写音乐列表内容。

<template>
  <ul>
    <li v-for="song in songs" :key="song.id" @click="handleSelect(song)">
      {{ song.name }}
    </li>
  </ul>
</template>

<script>
export default {
  name: 'List',
  props: { songs: Array },
  methods: {
    handleSelect(song) {
      this.$emit('select', song)
    }
  }
}
</script>

在Controls.vue中编写播放控制条内容。

<template>
  <div>
    <button @click="handlePrev">上一曲</button>
    <button @click="handlePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
    <button @click="handleNext">下一曲</button>
  </div>
</template>

<script>
export default {
  name: 'Controls',
  props: { isPlaying: Boolean },
  methods: {
    handlePrev() {
      this.$emit('prev')
    },
    handlePlay() {
      this.$emit('play')
    },
    handleNext() {
      this.$emit('next')
    }
  }
}
</script>

在index.html中引入需要的样式文件和JS文件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page2</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <div id="app"></div>
  <script src="./page2.js"></script>
</body>
</html>

在webpack.config.js中添加css-loader和vue-style-loader配置。

module.exports = {
  module: {
    rules: [
      {
        // 处理CSS文件
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader']
      },
      // ...
    ]
  },
  // ...
}