vue项目配置多入口(分模块打包)
有时候在一个vue项目需要多个入口,解决这个问题的方法有两种:方法一:在main.js的入口文件中根据url的后缀名称进行判断然后进行页面的跳转localhost:8080?startPage=index根据startPage的值进行判断方法二:给vue项目配置多个入口文件,通过访问的地址的不同进行页面的跳转具体操作为:在pages文件夹下新建index和admin、unquali...
有时候在一个vue项目需要多个入口,解决这个问题的方法有两种:
方法一:
在main.js的入口文件中根据url的后缀名称进行判断然后进行页面的跳转
localhost:8080?startPage=index
根据startPage的值进行判断
方法二:
给vue项目配置多个入口文件,通过访问的地址的不同进行页面的跳转
具体操作为:
在pages文件夹下新建index和admin、unqualified三个文件夹,然后将最外层的index.html和src下的main.js、App.vue、router文件夹移到index文件夹下,然后复制一份到admin和unqualified文件夹中。为了以便区分,将admin文件夹下的index.html改名成admin.html,App.vue改名Admin.vue(删除或更改其中的img标签的src路径,Admin.vue中的img标签也做同样处理),unqualified文件下的index.html改为unqualified.html,App.vue改名Unqualified.vue,且不要忘了把这两文件中id为app的div对应改名为admin、unqualified。
对admin文件夹下的main.js文件做一些改造(index文件夹下的main.js中 router的导入也需要修改下路径),如下所示:
entry: {
// app: './src/main.js',
index: path.resolve(__dirname, '../dist/index.html'),
admin: path.resolve(__dirname,'../src/pages/admin/main.js'),
unquatified: path.resolve(__dirname, '../dist/unqualified.html'),
},
打开webpack.dev.conf.js文件,修改配置如下:
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/pages/index/index.html',
inject: true,
chunks:['app'],
excludeChunks:['admin','unqualified'] // 需排除的代码块
}),
new HtmlWebpackPlugin({
filename: 'unqualified.html',
template: './src/pages/unqualified/unqualified.html',
inject: true,
chunks:['unqualified'],
excludeChunks:['app','admin'] // 需排除的代码块
}),
new HtmlWebpackPlugin({
filename: 'admin.html',
template: './src/pages/admin/admin.html',
inject: true,
chunks:['admin'],
excludeChunks:['app','unqualified'] // 需排除的代码块
}),
打开webpack.prod.conf.js文件夹,修改如下:
new HtmlWebpackPlugin({
filename: config.build.index,
template: './src/pages/index/index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency',
chunks:['manifest','vendor','app'], // 打包时排除掉的代码块
}),
new HtmlWebpackPlugin({
filename: config.build.unqualified,
template: './src/pages/unqualified/unqualified.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency',
chunks:['manifest','vendor','unqualified'],
excludeChunks: ['app'] // 打包时排除掉的代码块
}),
new HtmlWebpackPlugin({
filename: config.build.admin,
template: './src/pages/admin/admin.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency',
chunks:['manifest','vendor','admin'],
excludeChunks: ['app'] // 打包时排除掉的代码块
}),
在config文件夹下index.js内增加以下变量:
unquatified: path.resolve(__dirname, '../dist/unqualified.html'),
admin: path.resolve(__dirname, '../dist/admin.html'),
在webpack.prod.conf.js注释掉以下代码:
// new webpack.optimize.CommonsChunkPlugin({
// name: 'app',
// async: 'vendor-async',
// children: true,
// minChunks: 3
// }),
index文件下的访问路径是:
http://localhost:8080/index.html#/
或者
http://localhost:8080/#/
admin文件夹下的访问路径:
http://localhost:8080/admin.html#/
unqualified文件下的访问路径:
http://localhost:8080/unqualified.html#/
参考项目下载地址:
https://download.csdn.net/download/zuoyiran520081/11846655
更多推荐
所有评论(0)