有时候在一个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

Logo

前往低代码交流专区

更多推荐