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.js是否已加载的判断代码
May 20 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
javascript动画系列之模拟滚动条
Dec 13 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 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
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
javaScript如何生成xmlhttp
2013/12/16 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
2014/10/20 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
python斐波那契数列的计算方法
2018/09/27 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
python使用turtle绘制国际象棋棋盘
2019/05/23 Python
浅谈python 类方法/静态方法
2020/09/18 Python
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
高三毕业典礼演讲稿
2014/05/13 职场文书
客户答谢会活动方案
2014/08/31 职场文书
上党课的心得体会
2014/09/02 职场文书
2014年纳税评估工作总结
2014/12/23 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技