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']
		}
	}
}

配置后就可以启动了

在这里插入图片描述
在这里插入图片描述

  • 2
    点赞
  • 9
    收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论 3

打赏作者

Sam young

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值