vue cli 4 多个入口的配置方法

首先创建项目 vue create

把mian.ts 删除,建立一个package

分别创建2个入口 develop和product

develop的main.ts 文件

import Vue from 'vue'
import App from './develop.vue'
import router from '../../router/develop/index'
// import store from '../../store'

Vue.config.productionTip = false
console.log('from develop main.js')

new Vue({
  router,
  // store,
  render: h => h(App)
}).$mount('#develop')

develop.vue

<template>
  <div id="app">
    <div id="nav">
      这个是develop入口
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view />
  </div>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

同理prdouct一样操作

然后建立对应的路由文件

还有对应的模板

最后配置 vue.config.js 没有就创建一个

module.exports = {
	// 应用的架设路径，CLI默认你的项目部署在域名的根目录下所以publicPath默认为/
	publicPath: '/',
	// 构建后的文件是否启用哈希命名
	filenameHashing: true,
	// 是否在save文件时lint代码, 需要先安装cli-plugin-eslint
	// lintOnSave: process.env.NODE_ENV !== 'production',
	productionSourceMap: process.env.NODE_ENV !== 'production',
	chainWebpack: config => {
		// config.plugins.delete('prefetch-admin')
	},
	pages: {
		develop: {
			// 入口文件
			entry: 'src/package/develop/main.ts',
			// 入口的html文件位置
			template: 'public/develop.html',
			// 入口html文件在构建后的输出文件名
			filename: 'develop.html',
			// 网页标题栏标题内容
			title: 'develop版',
			// 入口项目所需要的chunk(chunk-vendors：三方库，chunk-common：公共内容，alpha: 入口自己的chunk)
			chunks: ['chunk-vendors', 'chunk-common', 'develop']
		},
		product: {
			entry: 'src/package/product/main.ts',
			template: 'public/product.html',
			filename: 'product.html',
			title: 'product版',
			chunks: ['chunk-vendors', 'chunk-common', 'product']
		}
	}
}

配置后就可以启动了