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保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 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
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
PHP操作xml代码
2010/06/17 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
PHP new static 和 new self详解
2017/02/19 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
2011/06/20 Javascript
更优雅的事件触发兼容
2011/10/24 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
vue使用laydate时间插件的方法
2018/11/14 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
python实现ftp客户端示例分享
2014/02/17 Python
python使用PyGame模块播放声音的方法
2015/05/20 Python
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
python+os根据文件名自动生成文本
2019/03/21 Python
Python中捕获键盘的方式详解
2019/03/28 Python
基于Python安装pyecharts所遇的问题及解决方法
2019/08/12 Python
python 实现dict转json并保存文件
2019/12/05 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
乡镇组织委员个人整改措施
2014/09/16 职场文书
员工教育培训协议书
2014/09/27 职场文书
九九重阳节标语
2014/10/07 职场文书
党员民主评议自我评价
2014/10/20 职场文书
小学教师自我评价
2015/03/04 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫
MySQL学习之基础命令实操总结
2022/03/19 MySQL