VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • vue-cli3+ts+webpack实现多入口多出口功能

    建站教程 2019年11月09日 关键词:,,,,,

    最近公司有一个需求,需要在项目里面嵌套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模拟后端数据的示例

    广而告之:
    热门推荐:
    数据结构-树(三):多路搜索树B树、B+树

    多路搜索树 完全二叉树高度:O(log2N),其中2为对数 完全M路搜索树的高度:O(logmN),其中M为对数,树每层的节点数 M路搜索树主要用于解决数据量大无法全部加载到内存的数据存储。通过增加每层节点的个数和在每个节点存放更多的数据来在一层中存放更多的数据,从而降低树的高···

    基于mysql的bbs设计(二)

    3。数据库设计   关键还是mysql的效率问题,合理分配mysql的内存,特别是table cache的 大小。另外,当系统突然掉电呢?mysql是否robust?   table的名字设计,采用一位前缀表明类型,全部用小写表示(?),例如: 系统的数据库,以s为前导,如用户···

    帝国cms分页问题的自动化如何实现

    分页问题频频被朋友提起,一一讲解太麻烦了,今天我给大家分享一下帝国CMS分页问题的自动化如何实现的经验,希望能给大家帮上忙。具体操作如下: (1)、打开“管理数据表%26rdquo; (2)、点“管理字段%26rdquo; (3)、将字段“newstext%26rdquo; 的 %26rdquo;输···

    webpack4之如何编写loader的方法步骤

    之前学习过webpack3的知识,但是webpack4升级后还是有很多变动的,所以这次重新整理一下webpack4的知识点,方便以后复习。 这次学习webpack4不仅仅要会配置,记住核心API,最好还要理解一下webpack更深层次的知识,比如打包原理等等,所以可能会省略一些比较基础的内容,但是希···

    Nofollow标签的写法以及nofollow使用介绍

    “nofollow” 标签是Google、Yahoo和微软公司前几年一起提出的一个标签,链接加上这个标签后就不会被计算权值,搜索引擎支持nofollow属性,在很大程度上抑制博客或论坛的垃圾留言。对站长来说是一件大好事。  nofollow是HTML元标签(meta)的content属性和链接标···

    Vue.js中 v-model 指令的修饰符详解

    1 .lazy v-model 指令默认会在 input 事件中加载输入框中的数据(中文输入法中输入拼音的过程除外)。我们可以使用 .lazy 懒加载修饰符,让其只在 change 事件中再加载输入框中的数据。 html: <div id="app"> <input type="text" v-model.lazy="content" placehol···

    织梦二次开发实现栏目分页前十页后十页功能

    我们在用织梦模板建站时候,需要实现栏目分页前十页后十页功能,我们可以用织梦二次开发来实现。 大概思路如下:修改includerc.listview.class.php文件中的GetPageListST和GetPageListDM两个函数   本文说的是前10和后10页,你也可以根据自己···

    JavaScript正则表达式的贪婪匹配和非贪婪匹配

    所谓贪婪匹配就是匹配重复字符是尽可能多的匹配,比如: "aaaaa".match(/a+/); //["aaaaa", index: 0, input: "aaaaa"] 非贪婪匹配就是尽可能少的匹配,用法就是在量词后面加上一个“?”,比如: "aaaaa".match(/a+?/); //["a", index: 0, input: "aaaaa"] 但是非贪···

    php设置session值和cookies的学习示例

    第一步:先在本地写一个登陆页面和一个内容页面(登陆了才能进去)吧。代码大致如下: 下面是login.php,用于请求登陆的,通过post传递参数,如果登陆成功就会注册session。 复制代码 代码如下:<?phpsession_start(); if (isset($_POST['username'])) {  &n···

    织梦会员模板调用全站head.htm模板教程

    织梦会员模板调用全站head.htm模板的方法如下 打开"/include/common.func.php"   然后在该文件中加入一个函数,代码如下: function pasterTempletDiy($path) {   require_once(DEDEINC."/arc.partview.class···