如何实现vue多页面开发

1、创建如下三个文件

src\pages\one\one.html

src\pages\one\one.js

src\pages\one\one.vue

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

one:  './src/pages/one/one.js'

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

 new HtmlWebpackPlugin({

        filename: 'one.html',

        template: 'src/pages/one/one.html',

        inject: true,

        chunks: ['one']

    })

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

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

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

5、配置生产环境

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

new HtmlWebpackPlugin({

        filename: config.build.one,   

        template: 'one.html',

        inject: true,

        minify: {

            removeComments: true,

            collapseWhitespace: true,

            removeAttributeQuotes: true

        },

        chunksSortMode: 'dependency',

        chunks: ['manifest', 'vendor', 'one']

    }),

filename引用的是\config\index.js里的build，每个页面都要配置一个chunks，不然会加载所有页面的资源。

6、然后one.js文件可以这样写：

import Vue from 'vue'

import one from './one.vue'

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

el: '#one',

  render: h => h(one)

})

在one.vue写法如下：

<template>

<div id="one">

    多页面开发之 页面一

</div>

</template>

<script>

export default { }

</script>

<style >

</style>

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

<template>

  <div id="app">

    <a href="one.html">one</a>

    <router-view/>

  </div>

</template>

7、查看效果

可以看到我们的配置成功了