交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • vue-cli3+ts+webpack实现多入口多出口功能

    最近公司有一个需求,需要在项目里面嵌套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做这个多入口的开发,那么请前往https://www.tslang.cn/docs/home.html,饱读经书 好吧!废话少说,那么现在进入正文:

    一些安装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+ts+webpack实现多入口多出口功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持!

    您可能感兴趣的文章:

    • webpack+vue-cli项目中引入外部非模块格式js的方法
    • 用npm安装vue和vue-cli,并使用webpack创建项目的方法
    • 解决vue-cli项目webpack打包后iconfont文件路径的问题
    • webpack4+Vue搭建自己的Vue-cli项目过程分享
    • 详解Vue-cli webpack移动端自动化构建rem问题
    • 解决vue-cli + webpack 新建项目出错的问题
    • Vue-cli-webpack搭建斗鱼直播步骤详解
    • 详解基于vue-cli优化的webpack配置
    • vue+vuecli+webpack中使用mockjs模拟后端数据的示例

    广而告之:
    热门推荐:
    jQuery+php简单实现全选删除的方法

    本文实例讲述了jQuery+php简单实现全选删除的方法。分享给大家供大家参考,具体如下: <input type="checkbox" id="ckb_selectAll" onclick="selectAll()" title="选中/取消选中"> <a href="javascript:void(0);" onclick="del_()" title="删除选定数据" style="font···

    将PHP的session数据存储到数据库中的代码实例

    一个开发环境有多个网站,需要使用不同的session,解决方案很多。不过这次也高大上一把,用数据库存,方便以后扩展。 PostgreSQL版 首先是数据库的部分 --drop table php_session create unlogged table php_session ( sess_id varchar(32) primary key, modify_time time···

    Vue2.0 事件的广播与接收(观察者模式)

    1.Vue1.0 事件的广播与接收(观察者模式) 早期vue1.0组件之间的这通信传递数据的方法,vue官网给出了两上方法 $dispatch 和 $broadcast。 但vue2.0之后就弃用 这两个方法,以下原因是vue官网给出来的 官方文档 2.Vue2.0 事件的广播与接收(观察者模式) vue2.0中可以使用 $em···

    vue结合axios与后端进行ajax交互的方法

    以前vue官方推荐的ajax库是vue-resource, 现在改为axios axios的github仓库 实现的效果: 异步请求 页面异步发出get请求获取数据,提交表单异步post数据到服务端 客户端 客户端代码 代码解析: // 服务端请求地址 let url = 'http://local.php.com/index.php'; let vm = ne···

    php二维数组排序详解

    有时候为了达到一定目的,需要对二维数组进行排序,现分享一下其实现的方法。复制代码 代码如下:$arr=array ('1' => array ( 'date' => '2011-08-18', 'num' => 5 ) ,'2' => array ( 'date' => '2011-08-20', 'num' => 3 ) ,'3' => array ( 'date' ···

    jQuery+ajax实现动态执行脚本的方法

    本文实例讲述了jQuery+ajax实现动态执行脚本的方法。分享给大家供大家参考。具体分析如下: 有时候,在页面初次加载时就取得所需的全部JavaScript也是没有必要的。具体需要取得哪个脚本,要视用户的操作而定。虽然可以在需要时动态地引人<script>标签,但注人所需代码的···

    PHP下用rmdir实现删除目录的三种方法小结

    1、递规法:利用递归一层一层的删。 复制代码 代码如下:deleteDir($dir)   {   if (rmdir($dir)==false && is_dir($dir)) {   if ($dp = opendir($dir)) {    ···

    Vue将页面导出为图片或者PDF

    本文实例为大家分享了Vue导出页面为PDF格式的具体代码,供大家参考,具体内容如下 导出为图片 1.将页面html转换成图片 npm install html2canvas --save 2.在需要导出的页面引入 import html2canvas from 'html2canvas'; 在 methods 中添加方法 dataURLToBlob(dataurl) {//···

    MySQL 序列 AUTO

    MySQL 序列 AUTO_INCREMENT详解及实例代码 MySQL序列是一组整数:1, 2, 3, ...,由于一张数据表只能有一个字段自增主键, 如果你想实现其他字段也实现自动增加,就可以使用MySQL序列来实现。 本章我们将介绍如何使用MySQL的序列。 使用AUTO_INCREMENT MySQL中最简单使用序列的···

    css小技巧汇总

    1、去除input记住密码后自动填充表单的黄色背景 input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #FFF inset; } //其中#fff是背景颜色值 2、IE8不支持opacity:0属性,可以加上下面属性: filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); 3、IE···