实现vue多页面开发

一般我们的vue项目都是单页面的，其实因为vue在工程化开发的时候依赖了webpack，webpack帮我们将所有的资源整合到一起而形成一个单页面。那么当我们要实现多页面的开发时就需要对webpack配置进行修改，本例主要是对webpack进行修改的介绍。

1.创建如下三个文件

src\pages\register\register.html

src\pages\register\register.js

src\pages\register\register.vue

2.修改build\webpack.base.conf.js目录下，在module.exports中，找到entry，添加多个入口register.js

register:  './src/pages/register/register.js'

3.对开发环境run dev里进行修改，打开\build\webpack.dev.conf.js文件，找到plugins,添加如下配置

 new HtmlWebpackPlugin({
        filename: 'register.html',
        template: 'src/pages/register/register.html',
        inject: true,
        chunks: ['register']
    })

4.对run build也就是编译环境进行配置。

打开\config\index.js文件，在build里加入：

register: path.resolve(__dirname, '../dist/register.html')

5.配置生产环境

打开/build/webpack.prod.conf.js文件，找到plugins，添加如下配置

		new HtmlWebpackPlugin({
			filename: config.build.register,
			template: './src/pages/register/register.html',
			inject: true,
			minify: {
				removeComments: true,
				collapseWhitespace: true,
				removeAttributeQuotes: true
			},
			chunksSortMode: 'dependency',
			chunks: ['manifest', 'vendor', 'register']
		})

filename引用的是\config\index.js里的build，每个页面都要配置一个chunks，不然会加载所有页面的资源。 template的url须为你register.html的路径。

6.register.js文件可以这样写：

import Vue from 'vue'
import register from './register.vue'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: '#register',
  render: h => h(register)
})

register.vue写法如下：

<template>
<div id="register">
    多页面开发之 页面一
</div>
</template>
<script>
export default { }
</script>
<style >
</style>

然后在App.vue里可以这样写：

<template>
  <div id="app">
    <a href="register.html">register</a>
    <router-view/>
  </div>
</template>

然后执行npm run dev查看效果 可以看到配置成功了

参考资料：百度经验