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的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
javascript 正则表达式相关应介绍
Nov 27 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
JavaScript模拟实现继承的方法
Mar 30 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
Javascript实现数组中的元素上下移动
Apr 28 Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
Vue路由模块化配置的完整步骤
Aug 14 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 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下intval()和(int)转换使用与区别
2008/07/18 PHP
PHP 常用函数库和一些实用小技巧
2009/01/01 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
stripos函数知识点实例分享
2019/02/11 PHP
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
浅谈document.write()输出样式
2015/05/07 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
Python编程中time模块的一些关键用法解析
2016/01/19 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
python web框架 django wsgi原理解析
2019/08/20 Python
Django 多对多字段的更新和插入数据实例
2020/03/31 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
写自荐信有哪些不宜?
2013/10/17 职场文书
广告设计专业自荐信范文
2013/11/14 职场文书
答谢会策划方案
2014/05/12 职场文书
电力培训心得体会
2014/09/02 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
蔬果开业典礼发言稿应该怎么写?
2019/09/03 职场文书