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


Posted in Javascript onMay 30, 2019

最近公司有一个需求,需要在项目里面嵌套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)。

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

本文不对ts做一些解释,但是你如果要用ts做这个多入口的开发,那么请前往https://www.tslang.cn/docs/home.html,饱读经书 好吧!废话少说,那么现在进入正文:

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

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

创造多页面文件

我的页面结构如下

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

改写文件

// 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实现多入口多出口功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript几种形式的树结构菜单
May 10 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
Mar 01 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
Jquery解析json数据详解
Dec 26 Javascript
JavaScript中对象属性的添加和删除示例
May 12 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 Javascript
详解用js代码触发dom事件的实现方案
Jun 10 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 #Javascript
了解JavaScript函数中的默认参数
May 30 #Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 #Javascript
轻松学习JavaScript函数中的 Rest 参数
May 30 #Javascript
细说Vue组件的服务器端渲染的过程
May 30 #Javascript
了解JavaScript中let语句
May 30 #Javascript
koa+jwt实现token验证与刷新功能
May 30 #Javascript
You might like
PHP用户指南-cookies部分
2006/10/09 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
不懂JavaScript应该怎样学
2008/04/16 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
python3+PyQt5使用数据库表视图
2018/04/24 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
什么是数组名
2012/05/10 面试题
经营理念口号
2014/06/21 职场文书
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang