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 相关文章推荐
jquery $.ajax入门应用二
Nov 19 Javascript
html数组字符串拼接的最快方法
Sep 16 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 Javascript
jQuery $.get 的妙用 访问本地文本文件
Jul 12 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
Dec 29 Javascript
Element UI框架中巧用树选择器的实现
Dec 12 Javascript
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 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守护进程(Daemon)
2015/12/30 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
Python实现分割文件及合并文件的方法
2015/07/10 Python
Python实现自动发送邮件功能
2021/03/02 Python
Python文件路径名的操作方法
2019/10/30 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
3种python调用其他脚本的方法
2020/01/06 Python
python实现滑雪者小游戏
2020/02/22 Python
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
中国医药集团国药在线:国药网
2017/02/06 全球购物
关于毕业的广播稿
2014/01/10 职场文书
消防安全管理制度
2014/02/01 职场文书
项目总经理岗位职责
2014/02/14 职场文书
联谊活动总结
2014/08/28 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
收银员岗位职责
2015/02/03 职场文书
高中体育课教学反思
2016/02/16 职场文书