vue-cli3 ts网络包实现多入口多出口功能

最近公司在项目中有嵌套h5页面的需求，嵌套页面不止一个，所以尽量使用webpack的多入口多出口打包模式，在网上查了很多资料，有多入口多出口的案例，github上也有对应的源代码，我就不多解释了。在这里发布博客。vue挤满了多个入口和多个出口。多入口多出口对应的源代码在这里。使用vue2.x webpack3.x集成了多入口和多出口，感兴趣的小伙伴可以看一下。

但公司领导要求将ts整合到项目中进行开发，对领域的类型有更好的控制，所以在多进多出配合的前提下，在与ts的配合上要做一些调整。我自己的发展道路可能在早期就已经走偏了。相反，添加tslint后，我被大量的类型检查和语法所困扰。没办法，只好适应发展。小女孩不得不这么做。为此，我们做了一套基于webpack3.x的ts集成，实现了多入口多出口。当时时间比较短，从webpack3.x升级到webpack4.x在实现上还是遇到了一些困难。因此，没有进一步的研究。

最近刚辞职，感觉webpack4.x已经发布一年多了。我没有实际参与过项目，也不是一个合格的前端。我终于下定决心在WebPack 4.x上参考(hua)、(she)、(tian)和(zu)。

本文不解释ts，但如果你想用ts进行这种多入口开发，请去https://www.tslang.cn/docs/home.html读经。废话少说，现在输入文本：

安装vue-cli3的一些操作以及如何初始化一个项目，这里就不解释了，因为我觉得网上很多文章都很详细，所以我觉得没有必要重写一篇。请自行搜索。

因为我是在ts的前提下写多入口多出口的，所以在项目初始化的时候就安装了typescript。

创建多页文件

我的页面结构如下

覆盖文件

//log in . t从“Vue”导入Vue；从“”导入登录名。/log in . vue '；从“”导入路由器././router '；vue . config . production tip=false；/* ESL int-禁用no-new */new Vue({ router，render: h=h(Login)，})。$ mount(' # log in ')；在login.ts文件中，也就是login.ts单个页面的main.js入口，我在这里遇到了一个坑，就是如果不改渲染，不会报错，但是不能渲染页面。

//log in . vuetemplatediv class=' log in ' { { msg } } router-view/router-view/div/template script lang=' ts ' import { Component，Vue } from ' Vue-property-decorator '；@Componentexport默认类Login扩展了Vue { private msg=' login}/script style/style vue-property-decorator是在vue中使用typescript，基于vue-class-component的封装插件。据说vue3将与ts原生兼容，那么我们应该鼓掌吗？

//login.html！DOCTYPE html html head meta charset=' utf-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' title vue _ multi/title/head body div id=' log in '/div！-构建的文件会自动注入-/body/htmlhtml，没什么好说的，其他页面也是这样创建的。没什么好说的。

在根目录下创建vue.config.js

webpack配置不再在vue-cli3中公开。如果要自定义配置，需要在根目录中手动创建vue.config.js。详细配置，我这次要配置的多页内容见下面的官方文档。

//glob是安装webpack时依赖的第三方模块。该模块还允许您使用符号，如*。例如，lib/*。js是获取lib文件夹下所有JS后缀的文件。让glob=require(' glob ')；let merge=require(' web pack-merge ')；let page=function(){ let EntryHTML=glob . sync(' src/view ' '/*/*)。html ')；//在vue-cli3中，不需要给配置文件的路径添加相对路径，也不需要找到绝对路径让obj={ }；entryhtml . foreach(file path={ let filename=filePath . substring(filePath.lastIndexOf('/')1，filePath . last indexof(' .)));让entryname=filePath.substring(0，filePath.lastIndexOf(' . ')));//我只重写了后缀letconf={entry: entryname '。为了使用html路径的方便。//这里需要注意的是，如果引用了TS和html的不同名称和路径的文件，那么template: filePath应该在这里进行相应的重写。//这里是html文件的访问路径：filename : filename’。html '，chunk s 3360[' chunk-venders '，' chunk-common '，filename]，}；if(process . ENV . node _ ENV==' production '){ conf=merge(conf，{ minify : { remove comments : true，collapseWhitespace: true，removeAttributeQuotes: true }，chunkssortmode : ' dependency ' })；} obj[filename]=conf })；返回对象；};module . exports={ public path : '/'，//官方要求是修改路径，这里做了修改。默认情况下，它位于根目录下，您可以自己配置outputdir:' dist '。//您也可以将其标记并动态打包到相关文件夹页面：页面()。Productionsourcemap: false，devserver3360 {open: true，//项目成功构建后，页面host: 'localhost '，//主机名会自动弹出，或者做实机测试时会弹出127 . 0 . 0 . 0 . 0 . 0 | | 0 . 0 . 0端口： 8081。/.

以上就是边肖给大家介绍的vue-cli3 ts网络包，实现了多入口多出口。希望对你有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！