App.vue =>common/ index.vue
Main.js => common/index.js复制代码

2、增加login.js,login.vue ，在全局目录下增加login.html

• 二、改配置

1、webpack.base.conf.js

entry: {index: './src/common/index.js',login: './src/common/login.js',
},复制代码

2. webpack.dev.conf.js

new HtmlWebpackPlugin({filename: 'index.html',template: 'index.html',inject: true,chunks: ['index']
}),
new HtmlWebpackPlugin({filename: 'login.html',template: 'login.html',inject: true,chunks: ['login']
}),复制代码

3.webpack.prod.conf.js

plugins:[new HtmlWebpackPlugin({filename: process.env.NODE_ENV === 'testing'? 'index.html': config.build.index,template: 'index.html',inject: true,minify: {removeComments: true,collapseWhitespace: true,removeAttributeQuotes: true// more options:// https://github.com/kangax/html-minifier#options-quick-reference},// necessary to consistently work with multiple chunks via CommonsChunkPluginchunksSortMode: 'dependency',chunks: ['manifest','vendor','index']
}),
new HtmlWebpackPlugin({filename: config.build.login,template: 'login.html',inject: true,minify: {removeComments: true,collapseWhitespace: true,removeAttributeQuotes: true// more options:// https://github.com/kangax/html-minifier#options-quick-reference},// necessary to consistently work with multiple chunks via CommonsChunkPluginchunksSortMode: 'dependency',chunks: ['manifest','vendor','login']
})],复制代码

及

由app改为index

4.构建配置更改、

Build下加入login

build: { // Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),login: path.resolve(__dirname, '../dist/login.html'),
}复制代码

完成了！！

• 三、结果

页面效果图，现在做成多页面入口后，login页面不再被渲染到content中，则可以实现如下效果。