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 相关文章推荐
JS提交并解析后台返回的XML的代码
Nov 03 Javascript
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
Javascript面向对象设计一 工厂模式
Dec 20 Javascript
12306验证码破解思路分享
Mar 25 Javascript
javascript this详细介绍
Sep 19 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
Feb 10 Javascript
vue 微信授权登录解决方案
Apr 10 Javascript
微信小程序实现日历功能
Nov 27 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
Jun 04 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中intval()等int转换时的意外异常情况
2013/06/21 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
JavaScript 拖拉缩放效果
2008/12/10 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
vue组件学习教程
2017/09/09 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
基于复选框demo(分享)
2017/09/27 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
CKEditor4配置与开发详细中文说明文档
2018/10/08 Javascript
iView框架问题整理小结
2018/10/16 Javascript
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
为Python的web框架编写前端模版的教程
2015/04/30 Python
python 的列表遍历删除实现代码
2020/04/12 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
业务助理岗位职责
2013/11/18 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
MySQL创建定时任务
2022/01/22 MySQL