vue-cli3+ts+webpack实现多入口多出口功能

最近公司有一个需求，需要在项目里面嵌套h5的页面，而且不止有一个嵌套的页面，那么就想办法运用webpack的多入口多出口的打包模式，网上查了很多资料，也有多入口多出口的案例，github上也有相应源码，我就不做过多讲解了。这里把博客贴出来vue多入口多出口打包，相应的多入口多出口的源码在 这里 。使用的是vue2.x + webpack3.x集成的多入口多出口，感兴趣的小伙伴可以看看。 然而，公司领导要求项目里面集成ts进行开发，对于字段的类型有更好的控制，所以在配合多入口多出口的前提下，还要配合ts进一步做一些调整。我本人开发路子可能前期走的野，反而加上tslint之后，被一堆类型检查，语法 【Vue CLI 3 + TypeScript + Webpack 多入口多出口实现】 在开发Web应用程序时，有时需要构建多个独立的页面，比如嵌套的H5页面。Vue CLI 3 是一个强大的脚手架工具，用于快速搭建 Vue.js 项目。而 TypeScript 提供了静态类型检查，能增强代码的可维护性和稳定性。结合 Webpack 的多入口多出口配置，我们可以构建多个不同的应用入口，每个入口对应一个单独的HTML页面和输出文件。 **Vue CLI 3 初始化项目与 TypeScript 集成** Vue CLI 3 在创建项目时默认支持 TypeScript。在初始化项目时，可以选择包含 TypeScript 支持的模板。这将自动安装并配置必要的 TypeScript 相关依赖，如 `typescript` 和 `vue-class-component`、`vue-property-decorator` 等。 **创建多页面文件结构** 为了实现多入口多出口，我们需要为每个页面创建一个独立的Vue组件，例如 `login.vue`，并为其创建对应的 `login.ts` 文件作为入口文件。在 `login.ts` 中，我们将 Vue 实例化并挂载到对应的HTML元素上，如下所示： ```javascript // login.ts import Vue from 'vue'; import Login from './login.vue'; import router from '../../router'; Vue.config.productionTip = false; new Vue({ router, render: h => h(Login), }).$mount('#login'); ``` 同时，创建对应的HTML页面 `login.html`，并在其中引入构建后的文件。 **webpack 配置多入口多出口** 在 Vue CLI 3 中，我们不能直接修改webpack配置，但可以通过创建 `vue.config.js` 文件来自定义配置。在这个文件中，我们可以利用 `glob` 模块找到所有的入口文件，并使用 `webpack-merge` 来合并配置。以下是一个简单的多入口配置示例： ```javascript // vue.config.js const glob = require('glob'); const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); function getEntry(globPath) { const entries = {}; glob.sync(globPath).forEach(entry => { const entryName = path.basename(entry, '.js'); entries[entryName] = entry; }); return entries; } module.exports = { pages: getEntry('src/pages/**/*.tsx'), configureWebpack: config => { config.plugins.push( ...Object.keys(getEntry('src/pages/**/*.tsx')).map(page => { return new HtmlWebpackPlugin({ filename: `${page}.html`, template: `public/${page}.html`, chunks: [page], }); }) ); }, }; ``` 这个配置会扫描 `src/pages` 目录下的所有 `.tsx` 文件，为每个文件创建一个页面入口，并生成对应的HTML文件。 **注意事项** - 使用 `vue-property-decorator` 可以让 Vue 组件更方便地使用 TypeScript，但需要注意的是，随着 Vue 3 的发布，原生支持 TypeScript，可能不再需要额外的装饰器库。 - Webpack 的配置可能会因项目的具体需求而有所不同，例如，你可能需要处理 CSS、图片、字体等静态资源。 - 确保正确配置 TypeScript 的 `tsconfig.json` 文件，以适应项目的特定需求，如模块系统、目标环境等。 在实际项目中，还需要关注性能优化、代码分割、热更新等配置。此外，随着技术的发展，Vue CLI 3 已经更新到了 Vue CLI 4，Webpack 也更新到了 5.x 版本，所以最好参考最新的文档来配置和管理项目。