Vue-cli项目搭建—进阶-优快云博客

本文链接：https://blog.youkuaiyun.com/yuhuo9/article/details/102798649

本文详细介绍如何在Vue项目中设置多个入口，包括创建额外的HTML、Vue组件和路由文件，以及修改webpack配置来支持多入口打包，适用于需要分离不同设备或场景页面的项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. 项目多入口

1. 创建第二个入口的文件

与第一个入口的一样

-- index_mobile.html
    src
	    -- App_mobile.vue
	    -- main_mobile.vue (代码里面修改引用的文件名)
	    router
	    	  -- index_mobile.js

2. 修改配置文件

(1) 修改 build/webpack.base.conf.js

module.exports = {
  entry: {
    ...,
    mobile: ["babel-polyfill", "./src/main_mobile.js"] //新增
  },

(2) 修改 build/webpack.dev.conf.js

const devWebpackConfig = merge(baseWebpackConfig, {
	...
	plugins: [
		...
		new HtmlWebpackPlugin({  
	      ...
	      chunks: ['app'] //修改
	    }),
		new HtmlWebpackPlugin({  //新增
	      filename: 'index_mobile.html',
	      template: 'index_mobile.html',
	      inject: true,
	      chunks: ['mobile']
	    })

(3) 修改 build/webpack.prod.conf.js

const webpackConfig = merge(baseWebpackConfig, {
	...
	plugins: [
		...
		new HtmlWebpackPlugin({
	      ...
	      chunks: ['manifest', 'vendor', 'app'] //修改
	    }),
	    new HtmlWebpackPlugin({   //新增
	      filename: process.env.NODE_ENV === 'testing'
	        ? 'index_mobile.html'
	        : config.build.mobile,
	      template: 'index_mobile.html',
	      inject: true,
	      minify: {
	        removeComments: true,
	        collapseWhitespace: true,
	        removeAttributeQuotes: true
	      },
	      chunksSortMode: 'dependency',
	      chunks: ['manifest', 'vendor', 'mobile']
	    })

(4) 修改 config/index.js

module.exports = {
   ...
   build: {
    ...
    mobile: path.resolve(__dirname, '../dist/index_mobile.html'), //新增