仿照vuecli生成的index.html 及src文件夹下面的main.js,App.vue 3个文件在复制一次（位置不变）
例如
建立newpage.html 复制index.html的内容 （修改div的id为newpage）
建立Newpage.vue复制App.vue的内容
修改id为newpage
name:'Newpage'
建立newpage.js复制main.js的内容（
修改import App from './App' 变为 import Newpage from'./Newpage.vue' ==>.vue不能少
修改 new Vue 里面的el为#newpage
components: { Newpage},
template: ' <Newpage/>'
）
修改config/index.js
找到
index: path.resolve(__dirname, '../dist/index.html'),
下面加上
newpage: path.resolve(__dirname, '../dist/newpage.html'),
修改build/webpack.base.conf.js
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js',
newpage:'./src/newpage.js'
},
修改build/webpack.dev.conf.js
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
新加下面的
new HtmlWebpackPlugin({
filename: ' newpage.html',
template: ' newpage.html',
inject: true,
chunks:[' newpage']
}),
修改build/webpack.prod.conf.js
new HtmlWebpackPlugin({
filename: 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 CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
新加下面的
new HtmlWebpackPlugin({
filename: config.build. newpage,
template: ' newpage.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 CommonsChunkPlugin
chunksSortMode: 'dependency',
chunks: ['manifest','vendor',' newpage']
}),
因为是临时才知道是多页面，整个项目页面已完成 要跳转的话就是在这个新加的Newpage.vue页面里面加入钩子函数进行路由跳转 我的入口只有2个 就只需要加一个页面 以此例推
然后npm run build打包 完事
参考https://blog.csdn.net/cookysurongbin/article/details/79107706