vue-cli3+ts+webpack实现多入口多出口功能

2024-09-27 10:23:38

最近公司有一个需求，需要在项目里面嵌套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)。

本文不对ts做一些解释，但是你如果要用ts做这个多入口的开发，那么请前往https://www.tslang.cn/docs/home.html，饱读经书好吧！废话少说，那么现在进入正文：

一些安装vue-cli3的操作，如何初始化一个项目这里也不做讲解，因为我觉得网上的很多文章都说的很详细，我觉得没必要重写一份，还请自己搜索。

由于我是在ts的前提下写多入口多出口，在初始化项目的时候，已经安装了typescript。

创造多页面文件

我的页面结构如下

改写文件

// 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实现多入口多出口功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

webpack+vue-cli项目中引入外部非模块格式js的方法

在开发vue的项目(我使用的是vue2),需要添加js,虽然可以通过npm install 安装插件,但是如果有一些插件并没有开源,这时候我们只有脸上宽面条了.所以我更倾向于在webpack中引入外部js文件. 1.直接引用 Note:(红色标注部分) 位置1:将页面中需要用到的js,引入进来,from 后面是该js所在的文件目录: 位置2:需要用到位置一中定义的变量Swiper; 位置3:为防止eslint严格模式下报错,需要将位置2定义的swiper再次调用一下: 以上这篇webpack+v
解决vue-cli项目webpack打包后iconfont文件路径的问题

在使用vue-cli创建vue项目时,可以自动生成webpack文件.使用 npm run build 即可打包发布生产文件,打包后的文件 webpack配置可以看到使用url-loader处理后的文件是在static目录下生成fonts目录下的文件.全部样式文件打包在css目录下app.hash.css文件中. 但我们会发现发布后,会存在字体文件找不到的问题,查看css文件发现是iconfont字体文件的路径引用问题. 解决方法: 在build/utils文件中的下图所示位置添加../../
Vue-cli-webpack搭建斗鱼直播步骤详解

前言想必大家都看过斗鱼直播吧?这次在下使用从github上面摸下来的API,为大家重现一下斗鱼网站的搭建,使用vue-cli-webpack来实现. 声明本文章所用API均从网络获取,本文作者不承担任何法律责任,请阅读本文的小伙伴们用于学习用途,不能用于商业! 如有侵权行为,请与作者联系,作者将于2日内删除. 效果 pc端移动端开始好,扯了这么久的淡,该开始构建项目了项目初始化初始化文件夹打开一个新文件夹,在命令行输入: vue init webpack 如果显示vue not
vue+vuecli+webpack中使用mockjs模拟后端数据的示例

前言使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据.使用mock就可以生成你要的数据了,从而实现开发时前后端分离. 其主要功能是: 基于数据模板生成模拟数据. 基于HTML模板生成模拟数据. 拦截并模拟 ajax 请求. 语法规范 Mock.js 的语法规范包括两部分: 1.数据模板定义规范(Data Template Definition,DTD) 2.数据占位符定义规范(Data Placeholder Definition,DPD) 数据模板定义规范 DTD
用npm安装vue和vue-cli,并使用webpack创建项目的方法

一.npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3.0 #升级 npm cnpm install npm -g 二.在用 Vue.js 构建大型应用时推荐使用 NPM 安装: # 最新稳定版 $ cnpm install vue 三.Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用. # 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ v
详解Vue-cli webpack移动端自动化构建rem问题

相信很多小伙伴想着自己的移动端项目能够自动转换为rem,这才符合前端的潮流,如果用自己手写或者编辑器插件来改动十分不方便还容易出错,我在网上找了很多的方法发现以下问题: 1 照着老的视频教程去弄,发现node npm webpack px2rem的各种插件版本都不一样,根本没用 2 网上的教程缺斤少俩,不完整,搞得我整了半天搞不定,想想干脆手动vscode 的cssrem设置算了,但老子还是不服气,东拼西凑还是整出来了,最后还是研究出了以下方法希望对大家的移动端自动化构建rem有帮助 1 安装v
解决vue-cli + webpack 新建项目出错的问题

今日使用 npm init webpack love 创建一个新项目,然后执行 npm run dev 之后项目报错,提示错误如下: 没有给这些选项指定值:config-name, context, entry, module-bind, module-bind-post, module-bind-pre, output-path, output-filename, output-chunk-filename, output-source-map-filename, output-public-
详解基于vue-cli优化的webpack配置

最近的项目度过了开始忙碌的基建期,也慢慢轻松下来,准备记录一下自己最近webpack优化的措施,希望有温故知新的效果. 项目采用的是vue全家桶,构建配置都是基于vue-cli去改进的.关于原始webpack配置大家可以看下这篇文章vue-cli#2.0 webpack配置分析,文章基本对于文件每行代码都做了详细的解释,有助于更好的理解webpack. 仔细总结了一下,自己的优化基本还是网上流传的那几点通过 externals 配置来提取常用库,引用cdn 合理配置CommonsChunkPl
webpack4+Vue搭建自己的Vue-cli项目过程分享

前言对于vue-cli的强大,使用过的人都知道,极大的帮助我们降低了vue的入门门槛最近在看webpack4,深感知识浅薄,这两天也一直在思考cli的配置,借助一些别人的实践,尝试自己搭建vue的项目,这里使用webpack4版本,之前我在网上查找别人的vue项目搭建,但是都是webpack3的,所以写了本文,如果有错误,或者有什么问题,请大佬们指出关于webpack的本文不会多说,请看webpack文档关于本文的github地址vue-MYCLI 你们的start是我发表的动力!!!!
vue-cli3+ts+webpack实现多入口多出口功能

最近公司有一个需求,需要在项目里面嵌套h5的页面,而且不止有一个嵌套的页面,那么就想办法运用webpack的多入口多出口的打包模式,网上查了很多资料,也有多入口多出口的案例,github上也有相应源码,我就不做过多讲解了.这里把博客贴出来vue多入口多出口打包,相应的多入口多出口的源码在这里 .使用的是vue2.x + webpack3.x集成的多入口多出口,感兴趣的小伙伴可以看看. 然而,公司领导要求项目里面集成ts进行开发,对于字段的类型有更好的控制,所以在配合多入口多出口的前提下,还要配
Vue cli3 库模式搭建组件库并发布到 npm的流程

市面上目前已有各种各样的UI组件库,比如 Element 和 iView ,他们的强大毋庸置疑.但是我们面临的情况是需求越来越复杂,当它们不能再满足我们需求的时候,这个时候就有必要开发一套属于自己团队的组件库了. 所以本文的目的就是让读者能通过此文,小能做一个简单的插件供人使用,大能架构和维护一个组件库不在话下. 以下一个简单的颜色选择器插件 vColorPicker 讲述从开发到上线到npm的流程. vColorPicker 插件 DEMO 一.技术栈如何通过新版脚手架创建项目,这里就不提了
详解Vue CLI3 多页应用实践和源码设计

对于一个网站来说,即需要h5页面也同时需要web页面,而h5和web页面共用很多代码,不做响应式,只能拆分两个页面来写,一个h5,一个web.用vue cli3怎么配置h5与web的应用呢? 解决思路: 首先,需要产生多页面应用,用webpack配置成多页面应用,一个h5一个web,这个网上已经有很多教程了,下面会再整理一次,接着把所有公共的代码提到多页面目录外面. 我们看一下官网给的 multi-page 的配置:需要在 vue.config.js 配置 pages,示例如下: pages:
vue cli3.0打包上线静态资源找不到路径的解决操作

项目中遇到打包之后静态资源路径找不到,报如下错误: 解决方法是: 在项目的根目录下创建vue.config,js文件,在里面配置静态资源的路径,publicPath是配置静态资源路径的属性,vue.config,js文件的代码如下: module.exports = { publicPath: './' } 补充知识:vue-cli3 npm run build 打包后静态资源的配置 vue.config.js的配置 vue.config.js配置如下: const path = require
vue接入ts基本方法

目录一.依赖记二.配置记三.修改记 1.将必要文件的.js替换为.ts 2.vue文件修改四.填坑记下面将以项目搭建的方式完成改文章叙述: 项目基础架构是通过cli搭建的,主要是vue(2.5.16)+ webpack(3.6.0)+ element-ui(2.8.2),整体项目还简单用了vuex,eslint等. 一.依赖记项目从基础js改为ts,因为是初次尝试,本着最小依赖.最小改动原则,只引入了一些基础依赖: typescript:#3.1.6 -- 接入ts的基础依赖,版本需
Vue工程模板文件 webpack打包配置方法

1.github github地址:https://github.com/MengFangui/VueProjectTemplate 2.webpack配置 (1)基础配置webpack.base.config.js const path = require('path'); //处理共用.通用的js const webpack = require('webpack'); //css单独打包 const ExtractTextPlugin = require('extract-text-webp
Vue CLI3 开启gzip压缩文件的方式

gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度.html.js.css文件甚至json数据都可以用它压缩,可以减小60%以上的体积. webpack在打包时可以借助 compression webpack plugin 实现gzip压缩,首先需要安装该插件: npm i -D compression-webpack-plugin 在vue cli3.0 生成的项目里,可在 vue.config.js 中按照如下方式进行配置: 压缩前后大小大致如下: 生成的压缩文件以.gz
Vue CLI3.0中使用jQuery和Bootstrap的方法

Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Bootstrap 需要设置很多配置项,网上有很多方法法,这里不重复写了.直接上 Vue CLI3.0 配置步骤. 第一步:安装 jQuery. Bootstrap.popper.js依赖. 其中popper.js 用于在 Bootstrap 中显示弹窗.提示.下拉菜单,所以需要引入. npm insta
webpack多入口多出口的实现方法

webpack是一个优秀的打包平台, 可以把sass, 图片, 字体等静态资源全部打包到js中作者最近在改造一个传统的静态网站, 为了减少http请求, 其中一个策略就是,把单个静态网页对应的多个静态资源(如字体, css, 图片, js), 打包输出到一个js文件中, 然后让每个html与对应独立的js相关联就可以了我在网上找了webpack配置的相关资料, html与js的对应关系都是, "一对一", "多对一", 但很少有"多对多"的实
vue cli3 配置proxy代理无效的解决

vue cli3 创建的vue项目配置开发环境代理无效,网上的各种配置都试了,还是不行,最后终于试出来一种配置方法 vue.config.js配置如下内容(不要配置任何多余的选项,什么changOrigin pathRewrite 之类的东西都不要配): module.exports = { devServer: { proxy:"http://127.0.0.1:8081", port: 8085 } } axios访问的时候不要配置任何东西,axios里访问的url不需要加任何前缀

vue-cli3+ts+webpack实现多入口多出口功能

相关推荐

随机推荐