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

栏目: JavaScript · 发布时间: 7年前

内容简介：最近公司有一个需求，需要在项目里面嵌套h5的页面，而且不止有一个嵌套的页面，那么就想办法运用webpack的多入口多出口的打包模式，网上查了很多资料，也有多入口多出口的案例，github上也有相应源码，我就不做过多讲解了。这里把博客贴出来vue多入口多出口打包，相应的多入口多出口的源码在然而，公司领导要求项目里面集成ts进行开发，对于字段的类型有更好的控制，所以在配合多入口多出口的前提下，还要配合ts进一步做一些调整。我本人开发路子可能前期走的野，反而加上tslint之后，被一堆类型检查，语法困扰，没法，要

最近公司有一个需求，需要在项目里面嵌套h5的页面，而且不止有一个嵌套的页面，那么就想办法运用webpack的多入口多出口的打包模式，网上查了很多资料，也有多入口多出口的案例，github上也有相应源码，我就不做过多讲解了。这里把博客贴出来vue多入口多出口打包，相应的多入口多出口的源码在这里。使用的是vue2.x + webpack3.x集成的多入口多出口，感兴趣的小伙伴可以看看。

然而，公司领导要求项目里面集成ts进行开发，对于字段的类型有更好的控制，所以在配合多入口多出口的前提下，还要配合ts进一步做一些调整。我本人开发路子可能前期走的野，反而加上tslint之后，被一堆类型检查，语法困扰，没法，要适应发展嘛。小女子只得从命。所以就做了一套在webpack3.x的基础上集成了ts，以及实现多入口多出口。当时时间比较紧张，从webpack3.x升级到webpack4.x，在实现上来说，还是遇到了一些困难。所以后面就没有继续研究了。

近期刚辞职，有一些时间然后也觉得webpack4.x发布也有1年多的时间了，还没有在项目中实战，不是一个合格的前端，终于下定决心要在webpack4.x上面指(hua)点(she)江(tian)山(zu)。

本文不对ts做一些解释，但是你如果要用ts做这个多入口的开发，那么请前往typescript官方文档，饱读经书好吧！废话少说，那么现在进入正文：

一些安装vue-cli3的操作，如何初始化一个项目这里也不做讲解，因为我觉得网上的很多文章都说的很详细，我觉得没必要重写一份，还请自己搜索。

由于我是在ts的前提下写多入口多出口，在初始化项目的时候，已经安装了typescript。

创造多页面文件

我的页面结构如下

改写文件

// login.ts
import Vue from 'vue';
import Login from './login.vue';
import router from '../../router';

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  router,
  render: h => h(Login),
}).$mount('#login');
复制代码

在login.ts文件，也就是login.html的单页面的main.js入口，在这里我遇到了坑，就是如果不改成render的形式，不报错，但是渲染不出页面，

// login.vue
<template>
<div class="login">
  {{msg}}
  <router-view></router-view>
</div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class Login extends 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="login"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

复制代码

html也看就没啥说的了，另外的页面也按照同样的方式创建就完事了。没啥说的。

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

在vue-cli3中不再暴露webpack的配置，如果要进行自定义配置，需要手动在根目录创建 vue.config.js ，详细配置可以看官方文档下面是我这次要配置多页面的内容；

// glob是webpack安装时依赖的一个第三方模块，还模块允许你使用 *等符号, 例如lib/*.js就是获取lib文件夹下的所有js后缀名的文件
let glob = require("glob");
let merge = require("webpack-merge");

let page = function() {
  let entryHtml = glob.sync("src/views" + "/*/*.html"); // 在vue-cli3中配置文件的路径不需要加相对路径，也不需要找绝对路径
  let obj = {};
  entryHtml.forEach(filePath => {
    let filename = filePath.substring(filePath.lastIndexOf("/") + 1, filePath.lastIndexOf("."));
    let entryname = filePath.substring(0, filePath.lastIndexOf(".")); // 我为了方便使用的html的路径，最后只是改写后缀
    let conf = {
      entry: entryname + '.ts', // 此处需要注意，如果引用ts和html不同名称与路径的文件，在此处做相应改写
      template: filePath, // 此处是html文件的访问路径
      filename: filename + ".html",
      chunks: ["chunk-vendors", "chunk-common", filename],
    };
    if (process.env.NODE_ENV === "production") {
      conf = merge(conf, {
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true
        },
        chunksSortMode: "dependency"
      });
    }
    obj[filename] = conf
  });
  return obj;
};

module.exports = {
  publicPath: '/', // 官方要求修改路径在这里做更改，默认是根目录下，可以自行配置
  outputDir: 'dist', //也可加标识，动态打包到相关文件夹
  pages: page(),
  productionSourceMap: false,
  devServer: {
    open: true, // 项目构建成功之后，自动弹出页面
    host: 'localhost', // 主机名，也可以127.0.0.0 || 做真机测试时候0.0.0.0
    port: 8081, // 端口号，默认8080
  }
}
复制代码

由此我们的vue-cli3 + typescript + 多入口多出口就完成了。写完之后发现，我的天，已经快凌晨3点啦，我要睡了，古耐（:blush:）

最后

添一下项目源码，可以猛戳这里我是看到在我的一顿搜索之后，并没有看到像vue-cli3+ts集成多页面的文章，所以希望会对你有帮助。技术文章都有时效性，不过如果我不懒的话，会不定时更新。比心！请轻喷，要还是个新司机。有更好的方法、看法，或者发现错误，欢迎留言咯。

以上所述就是小编给大家介绍的《vue-cli3+ts+webpack实现多入口多出口》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Writing Apache Modules with Perl and C

Lincoln Stein、Doug MacEachern / O'Reilly Media, Inc. / 1999-03 / USD 39.95

Apache is the most popular Web server on the Internet because it is free, reliable, and extensible. The availability of the source code and the modular design of Apache makes it possible to extend Web......一起来看看《Writing Apache Modules with Perl and C》这本书的介绍吧!

码农工具