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 加号(+)运算符号
Dec 06 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 Javascript
jQuery soColorPacker 网页拾色器
Jun 22 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
Angular弹出模态框的两种方式
Oct 19 Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 Javascript
Vue 组件注册实例详解
Feb 23 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
开发一个封装iframe的vue组件
Mar 29 Vue.js
详解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 读取文件乱码问题
2010/02/20 PHP
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
jQuery删除当前节点元素
2016/12/07 Javascript
javascript垃圾收集机制的原理分析
2016/12/08 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
2018/10/08 Javascript
three.js实现圆柱体
2018/12/30 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
Python3 能振兴 Python的原因分析
2014/11/28 Python
线程和进程的区别及Python代码实例
2015/02/04 Python
python的多重继承的理解
2017/08/06 Python
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
python实现滑雪者小游戏
2020/02/22 Python
Python函数递归调用实现原理实例解析
2020/08/11 Python
python3处理word文档实例分析
2020/12/01 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
实习报告评语
2014/04/26 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers