admin管理员组文章数量:1633933
首先创建项目 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']
}
}
}
配置后就可以启动了
版权声明:本文标题:vue cli 4 多个入口的配置方法 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1729176831a1188825.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论