vue构建多入口多出口项目

科技前沿 • 2025-01-19 12:03 • 阅读 83

大家好，我是讯享网，很高兴认识大家。

 vue构建多入口 多出口项目

讯享网

（1）使用vue-clit搭建项目

讯享网cnpm install -g vue-cli

vue init webpack '项目名'

（2）调整一下项目目录
在这里插入图片描述
讯享网
（3）修改main.js和other.js文件
main.js

讯享网import Vue from 'vue' import App from './entrance/App' import router from './router/indexRouter.js' Vue.config.productionTip = false new Vue({ el: '#app', router, components: { App }, template: '<App/>' })

other.js

import Vue from 'vue' import App from './entrance/other' // 入口文件调用 other.vue import router from './router/otherRouter.js' // 路由调用 otherRouter.js Vue.config.productionTip = false new Vue({ el: '#app', router, components: { App }, template: '<App/>' })

（4）找到关于配置index.html入口的文件，加上other.html配置

build —> webpack.base.conf.js文件

讯享网entry: { app: './src/main.js', other:'./src/other.js' },

build —> webpack.dev.conf.js文件

  new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
			chunks: ['app']
    }), 
	new HtmlWebpackPlugin({
		filename: 'other.html',
		template: 'other.html',
		inject: true,
		chunks: ['other']
	}),

build —> webpack.prod.conf.js文件

讯享网 new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency',
	  chunks: ['manifest', 'vendor', 'app']

    }),
		new HtmlWebpackPlugin({
			filename: config.build.other,
			template: 'other.html',
			inject: true,
			minify: {
				removeComments: true,
				collapseWhitespace: true,
				removeAttributeQuotes: true
			},
			chunksSortMode: 'dependency',
			chunks: ['manifest', 'vendor', 'other']
		}),

config ----> index.js

讯享网 build: {
	    // Template for index.html
	    index: path.resolve(__dirname, '../dist/index.html'),
	    other: path.resolve(__dirname, '../dist/other.html'),
    }

(5) 运行
http://localhost:8080/ 默认打开index.html
http://localhost:8080/other.html#/ 打开other.html页面

(6)打包
npm run build
打包后的dist文件夹下，有index.html和other.html
在这里插入图片描述

github地址 https://github.com//vue_multiple_entry

vue构建多入口 多出口项目

相关推荐

vue构建多入口多出口项目