最近公司有一个需求,须要在项目里面嵌套h5的页面,并且不止有一个嵌套的页面,那么就想办法运用webpack的多入口多出口的打包模式,网上查了不少资料,也有多入口多出口的案例,github上也有相应源码,我就不作过多讲解了。这里把博客贴出来vue多入口多出口打包,相应的多入口多出口的源码在这里。使用的是vue2.x + webpack3.x集成的多入口多出口,感兴趣的小伙伴能够看看。html
然而,公司领导要求项目里面集成ts进行开发,对于字段的类型有更好的控制,因此在配合多入口多出口的前提下,还要配合ts进一步作一些调整。我本人开发路子可能前期走的野,反而加上tslint以后,被一堆类型检查,语法困扰,无法,要适应发展嘛。小女子只得从命。因此就作了一套在webpack3.x的基础上集成了ts,以及实现多入口多出口。当时时间比较紧张,从webpack3.x升级到webpack4.x,在实现上来讲,仍是遇到了一些困难。因此后面就没有继续研究了。前端
近期刚辞职,有一些时间 而后也以为webpack4.x发布也有1年多的时间了,尚未在项目中实战,不是一个合格的前端,终于下定决心要在webpack4.x上面指(hua)点(she)江(tian)山(zu)。 vue
本文不对ts作一些解释,可是你若是要用ts作这个多入口的开发,那么请前往typescript官方文档,饱读经书 好吧!废话少说,那么如今进入正文:webpack
一些安装vue-cli3的操做,如何初始化一个项目这里也不作讲解,由于我以为网上的不少文章都说的很详细,我以为不必重写一份,还请本身搜索。git
因为我是在ts的前提下写多入口多出口,在初始化项目的时候,已经安装了typescript。github
个人页面结构以下 web
// 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的形式,不报错,可是渲染不出页面,vue-cli
// 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了,是否是该拍手叫好。typescript
// 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也就没啥说的了,另外的页面也按照一样的方式建立就完事了。没啥说的。bash
在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 + typescript + 多入口多出口就完成了。 写完以后发现,个人天,已经快凌晨3点啦,我要睡了,古耐(😊)
添一下项目源码,能够猛戳这里 我是看到在个人一顿搜索以后,并无看到像vue-cli3+ts集成多页面的文章,因此但愿会对你有帮助。 技术文章都有时效性,不过若是我不懒的话,会不定时更新。比心!请轻喷,我仍是个新司机。有更好的方法、见解,或者发现错误,欢迎留言咯。