webpack多页面教你轻松打造一个vue项目同时跑出pc端和h5端_北极那企鹅丶的博客-程序员宝宝

技术标签: webpack多页面  vue  vue-cli3搭建多页面  一个项目同时跑多端  

    最近做了一个官网项目,有pc和h5两端,想着又要新开两个项目,一个放pc,一个放h5,然后发布的时候又要分开,不由得头大,忽然想起webpack不是有多页面嘛,干嘛不一个项目一个pc端页面,一个h5端页面,然后像图片资源、公共方法、请求api等等之类的不就可以共用了嘛,发布的时候也只需要打包一个就可以啦,结果也附和预期,闲话少说,上代码

webpack手动版

    这个版本基本和vue-cli创建的simple版本相似,所以参考simple吧(偷个懒)。

通过vue-cli 创建的simple版本

    先来个文件目录
文件目录
因为我们是pc和h5的,所以为了方便,我们建好pc和h5的入口文件,以及各自的依赖模版,因为笔者自己这个是没有router的,组件跳转都是用了swiper,来模拟的一个轮播效果,所以router文件没有,下一篇会用到,vuex也是利用了vue.observable来简单实现的,所以整个项目的体量非常小

自己手动撸也是要建立个webapck.config.js,然后就是多页面的建立,这里我们稍微改造下
入口文件

entry:{
    
    web:'./src/index-web.js', //pc端的入口文件
    h5:'./src/index-h5.js' //h5端的入口文件
 }

然后是plugin

plugins:[
	//pc端采用的模版,然后命名为index.html
    new HtmlPlugin({
    
        template:'./index.html',
        filename:'index.html',
        chunks:['web']
    }),
    //h5端采用的模版,然后命名为h5.html
    new HtmlPlugin({
    
      template:'./index.html',
      filename:'h5.html',
      chunks:['h5']
  })
 ]

chunks多页面时采用,为指定的文件加载对应的js,我们保证一一对应就行,
至于其它的配置,我们保持默认就可以啦,现在我们的两个端页面就可以跑起来啦,但是又有个疑问,我怎么进h5端呢,还有pc端采用的是px,h5端使用的是rem,这怎么搞?别急,咱一步步来,看到我们配置的plugin采用的都是index.html木,我们只需要在哪里进行配置下就行啦,当然也可以指定两个模版,不过,一个就够了噻能偷懒还是偷个懒吧(嘿嘿.jpg)
index.html

@media screen and (max-width:480px) {
    
   html {
    
     font-size: 625%;
   }
 }

当当当 媒体查询老哥出场了,我们在这限制下,小于480的屏我们都采用1rem = 100px,这样h5端就可以使用rem进行布局,pc端依然可以使用px啦
我们想访问h5端,只需要在根路由下加个h5.html就可以啦,举个栗子,pc端是127.0.0.1:8080/#/,那么h5端就是127.0.0.1:8080/h5.html/#/,但是我们总不能让用户自己输入吧,so

!function () {
    
   if (isMobileUserAgent()) {
    
     if (!/h5.html/.test(location.href)) {
    //移动端时,我们跳转到h5的html
       window.location.href = window.location.origin + '/h5.html'
     }
   }
   function isMobileUserAgent() {
    // 判断是pc端还是h5端
     return /iphone|ipod|android|windows.*phone|blackberry.*mobile/i.test(
       window.navigator.userAgent.toLowerCase()
     );
   }
 }()

我们在下面在写个判断pc和手机的自执行函数,让它给咱们来切,当然为了防止每次刷新都跳首页,我们加个判断,当处于h5端时就不必要再次跳转啦,老哥可以休息啦。

至此我们的两端就搞完了,小伙伴可以自己试试哦,附上demo

通过vue-cli2 创建的完整版,包含完整的router等

相信通过上面的,大家已经会搭建两端,而这次呢,我们就来对vue-cli创建的完整版进行改造。
依然是来个文件目录
文件目录
小伙伴有木有觉得巨熟悉的感jio,来咱们一起对它进行改造改造,老规矩
入口文件
build文件下,webpack.base.conf.js,老哥躲这里呢

entry:{
    
    web:'./src/index-web.js', //pc端的入口文件
    h5:'./src/index-h5.js' //h5端的入口文件
 }

plugin
同样也是在build文件下,webpack.dev.conf.js,它也在这

//pc端采用的模版,然后命名为index.html
new HtmlWebpackPlugin({
    
   filename: 'index.html',
   template: 'index.html',
   inject: true,
   chunks: ['web']
 }),
 //h5端采用的模版,然后命名为h5.html
 new HtmlWebpackPlugin({
    
   filename: 'h5.html',
   template: 'index.html',
   inject: true,
   chunks: ['h5']
 })

小伙伴别忘了,咱刚刚改的是dev下的plugin,还有个老哥还在躲着呢,不得揪出来

build文件下,webpack.prod.conf.js,这下好了,仨兄弟

new HtmlWebpackPlugin({
    
   filename: config.build.web,
    template: 'index.html',
    inject: true,
    minify: {
    
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
      // more options:
      // https://github.com/kangax/html-minifier#options-quick-reference
    },
    // necessary to consistently work with multiple chunks via CommonsChunkPlugin
    chunksSortMode: 'dependency',
    chunks: ['manifest', 'vendor', 'web']
  }),
  new HtmlWebpackPlugin({
    
    filename: config.build.h5,
    template: 'index.html',
    inject: true,
    minify: {
    
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
      // more options:
      // https://github.com/kangax/html-minifier#options-quick-reference
    },
    // necessary to consistently work with multiple chunks via CommonsChunkPlugin
    chunksSortMode: 'dependency',
    chunks: ['manifest', 'vendor', 'h5']
  })

咱就改改加载的模版和启动后的模版名字就阔以啦,其它保持默认

不知道小伙伴有没有发现,prod的plugin,filename还是变量呀,咱不得改改,是吧,就咱这暴脾气
config文件下,index.js,小老弟还想跑

	web: path.resolve(__dirname, "../dist/index.html"),
  	h5: path.resolve(__dirname, "../dist/h5.html"),

这个文件,咱也改改,不然打包不正确,不能光开发环境跑的贼溜是吧,咱生产也得一致啊。
index.html
偷个懒行不,看看上面的配置,还是自己来吧,多大点事啊

@media screen and (max-width:480px) {
    
   html {
    
     font-size: 625%;
   }
 }


!function () {
    
   if (isMobileUserAgent()) {
    
     if (!/h5.html/.test(location.href)) {
    //移动端时,我们跳转到h5的html
       window.location.href = window.location.origin + '/h5.html'
     }
   }
   function isMobileUserAgent() {
    // 判断是pc端还是h5端
     return /iphone|ipod|android|windows.*phone|blackberry.*mobile/i.test(
       window.navigator.userAgent.toLowerCase()
     );
   }
 }()

通过vue-cli3 创建的完整版,包含完整的router等

vue-cli3 首先需要你安装vue-cli3的脚手架,安装姿势

npm install @vue/cli -g

如果你本身安装了vue-cli2 那么你需要先卸载掉它,卸载的姿势

npm uninstall vue-cli -g

安装完成之后,通过npm --version查看安装的版本
创建项目可以通过vue create 项目名创建,也可以通过vue ui可视化页面进行操作,在此不多说,详细教程可以查看官网
依然是我们的项目目录
在这里插入图片描述
因为vue-cli3使用webpack-chain把webpack的配置写进了代码里,所以我们在项目里是无法找到的,不过通过vue inspect > output.js可以把webpack默认的配置文件导出。这样我们就可以查看了。
还有我们的多页面需要修改webpack,这个时候我们就需要在项目根目录下创建vue.config.js文件,里面写我们需要修改的webpack配置。企鹅写的是这些,同样需要更过配置到官网找就行。

module.exports = {
    
	// pages 里面存放多页面的配置,为对象形式,key为多页面的入口名称
	pages: {
    
		web: {
    
			// 入口文件
			entry: './src/web.js',
			// 模板来源
			template: 'public/index.html',
			// 在 dist/index.html 的输出
			filename: 'index.html',
			title: 'PC',
			// 提取出来的通用 chunk 和 vendor chunk。
			chunks: ['chunk-vendors', 'chunk-common', 'web']
		},
		h5: {
    
			// 入口文件
			entry: './src/h5.js',
			// 模板来源
			template: 'public/index.html',
			// 在 dist/index.html 的输出
			filename: 'h5.html',
			title: 'H5',
			// 提取出来的通用 chunk 和 vendor chunk。
			chunks: ['chunk-vendors', 'chunk-common', 'h5']
		}
	}
}

剩下的和上面的配置一毛一样,这里就不多写啦。看到这是不是觉得vue-cli3贼好用。项目已经放到了github上面,有需要的可以clone下来。

熟悉的配方,嘿嘿,好了,至此咱的东西算是统统解决了,小伙伴试试呗

额外的东西,接上面的路由配置,路由可以集中一个,也可以单独进行配置,但为了方便嘛,咱还是各用各的,一样写路由,只不过在入口文件哪里引入不同的配置就行,同理,像什么pc端或者h5端所独自使用的插件也是没问题的,这样,公共资源,比如图片啊,封装的方法啊,还有存的信息啥的,都可以共用,比如国际化,pdf文档啥的。如果pc和h5的写法规范,路由保持一致,只需要在index.html那里改造下,就可以保证,pc和h5的无缝切换,pc端login进入h5时时也能对呀login页面,状态信息一样可以共用。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_36616301/article/details/102687836

智能推荐

DFSClient技术内幕 (DFSClient介绍以及其初始化)_天然呆的技术博客的博客-程序员宝宝_dfsclient

以下是本人研究源代码成果, 此文僅献给我和我的小伙伴们,不足之处,欢迎斧正-------------------------------------------------致谢道格等人!注:hadoop版本0.20.2,有童鞋表示看代码头晕,所以本文采用纯文字描述,哥还特意为你们把字体调调颜色噢 ^ o ^大家都知道,hadoop是最优秀的大数据处理框架之一,而本文研究的DFSClient

python创意小作品代码-Python学习,给自己的代码做个合集,定制自己的桌面软件!..._weixin_37988176的博客-程序员宝宝

在学习Python的过程中,经常会写很多的练手的脚本,那么有没有想过,写到一起呢?当然了,方法有很多,比如写到web网页中,做各种跳转、写到微信中,各种回复关键字调用,还有今天和大家分享的GUI图形用户界面!构建基本框架Python中有标准库tkinter,不需要安装即可使用!可以用来写简单的GUI程序,只需要短短几行代码就可以了,比如下面这个:具体教程大家可以去自行搜索,这里就不一一细说了,注释...

2020年深圳杯C题_zengshengli775的博客-程序员宝宝_深圳杯c题

C题:无线可充电传感器网络充电路线规划摘要物联网的快速发展带动了无线传感器网络WSN在生活中的广泛运用。无线传感器网络中包括若干传感器以及一个数据中心,这些传感器的电池均需要移动充电器提供能量来维持正常的工作。移动充电器的能量一方面用于传感器的充电,另一方面用于充电路上的消耗。为减少移动充电器路上消耗,提高能量利用率,需要合理规划移动充电器充电路线。针对问题一,要使得能耗最小化,就要保证移动充电器行走的路程最小,所以路线图可看成网络图,利用地球半径和各传感器的经纬度计算可以得出各个点之间的距离,

【暑假】[深入动态规划]UVa 1628 Pizza Delivery_hahalidaxin的博客-程序员宝宝

UVa 1628 Pizza Delivery 题目:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=51189思路:  本体与修缮长城一题有所相似。所以解法有相似之处。  不同之处就是本体可能会产生负情况,即送餐时间晚了客户会反过来找你要钱所以需要放弃,但修缮长城只有费用,顺手修了肯定是一个不错的选择

小程序使用npm_Aubrey-廖的博客-程序员宝宝

  小程序第一次使用npm在需要的目录里面使用npm init 命令,然后确认就好了.想引入哪一个npm包时,直接npm install (包名称) --production就可以   在所需要使用组件的json 文件下:"usingComponents": {"slide-view": "miniprogram-slide-view"}然后<...

ansible(replace模块)批量修改centos8、ubuntu、centos7网卡地址_临江仙我亦是行人的博客-程序员宝宝_ansible replace

[[email protected] ansible]#cat change_network.yml---- hosts: all remote_user: root vars: old_ip: "172.17" new_ip: "172.18" tasks: - name: find centos8 network name shell: find /etc/sysconfig/network-scripts -name "ifcfg*" regi

随便推点

托福考试的一些建议_冰竹依梦的博客-程序员宝宝

对于阅读,根据小站托福里题型练习里面对阅读各模块分类练习。 写作从小站托福官网上下载了一些视频,对托福综合写作和独立写作的常见题型进行了归类总结和方法指导,强烈推荐学习一波。尤其是冲刺篇视频。 口语要求反应要快,只有15秒的思考时间,45秒作答时间,所以需要很快构思好自己的逻辑,我刚开始练习的时候往往面对一个主题不知道该说些什么,而且时间往往达不到45秒,所以就多听听小站托福上已录的其他备考考生的回答,从中获得一些启发,逐渐形成自己的思维方式和逻辑。

【sequoiadb|巨杉数据库】MySQL实例如何配置SequoiaDB服务2?_兔壮壮的博客-程序员宝宝

【sequoiadb|巨杉数据库】MySQL实例如何配置SequoiaDB服务?用户可以通过命令行方式或配置文件方式配置数据库服务。在集群部署时,每个数据库节点默认生成一个配置文件,存放在数据库软件安装路径下 conf/local/ 目录下。默认情况下,通过集群管理服务或 sdbstart 命令启动数据库节点时,系统使用默认配置文件配置数据库服务。巨杉数据库官网:http://doc.sequoiadb.com/cn/sequoiadb-cat_id-1561382406-edition_id-500

Android项目架构设计深入浅出_马小瑄的博客-程序员宝宝_android 程序结构设计

前言:本文结合个人在架构设计上的思考和理解,介绍如何从0到1设计一个大型Android项目架构。一 引导本文篇幅较长,可结合下表引导快速了解全文主脉络。 章节标题 章节简介 项目架构演进 总结一个普通Android项目从0到1再到N的架构演进历程。 项目架构拆解 对一个架构完整的大型Android项目中各层级及其核心模块进行展开讲解。 核心原理总结 ..

Pytorch 自学笔记(二):Pytorch中常用的激活函数与损失函数探究_JimmyTotoro的博客-程序员宝宝_pytorch多分类激活函数

Pytorch 自学笔记系列的第二篇针。对Pytorch中常用的激活函数与损失函数进行一个简单的介绍

java并发库之Executors常用的创建ExecutorService的几个方法说明_拎干的毛巾的博客-程序员宝宝

java并发库之Executors常用的创建ExecutorService的几个方法说明 Executors提供了一些方便创建ThreadPoolExecutor的常用方法,主要有以下几个:1、 Executors.newFixedThreadPool(int nThreads);创建固定大小(nThreads,大小不能超过int的最大值)的线程池//线程数量int nTh

推荐文章

热门文章

相关标签