uniapp小程序分包页面引入wxcomponents(vue.config.js、copy-webpack-plugin)

实例:小程序添加一个源生小程序插件,按照uniapp官方的说明,要放在wxcomponents。后来发现小程序超2m上传不了。
正常的编译情况在这里插入图片描述
会被编译到主包下
在这里插入图片描述
思路:把wxcomponents给编译到分包sub_package下

用uniapp的vue.config.js自定义静态资源目录
按照官方要求copy-webpack-plugin用5.0.0的版本(不用5.0.0的话,会报错,忘了截图)

npm install -save copy-webpack-plugin@5.0.0

把wxcomponents真个文件夹放到sub_package下
在项目根目录创建vue.config.js文件

const path = require('path');

function resolve(dir) {
   
	return path.join(__dirname, dir)
}
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
   
	configureWebpack:{
   
		plugins: [
			new CopyWebpackPlugin([{
   
				from: path.join(__dirname, 'sub_package/wxcomponents'),
				to: path.join(__dirname, 'unpackage/dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev',
					'mp-weixin', 'sub_package/wxcomponents')
			}])
		]
	}
}

解释下:CopyWebpackPlugin的from就是把分包sub_package/wxcomponents里的文件自定义打包到unpackage/dist->build/dev->mp-weixin->sub_package/wxcomponents里
pages.json也要改下引入的路径

"subPackages": [
	{
   
		"root": "sub_package",
		"pages": [
			{
   
				"path": "face/face",
				"style" :
				{
   
				    "navigationBarTitleText": "测试",
				    "enablePullDownRefresh": false,
					"usingComponents": {
   
						"verify-test":"../wxcomponents/test/index/index"
					}
				}
			}
		]
	}
]

修改后编译
在这里插入图片描述
主包下就找不到wxcomponents
在这里插入图片描述
打包到分包sub_package里了
在这里插入图片描述

注意点:之前在网上找了很多方法,虽然都是用copy-webpack-plugin,但是都实现不了,原因在CopyWebpackPlugin的to路径上的问题,本来是这样的

configureWebpack:{
   
	plugins: [
		new CopyWebpackPlugin([{
   
			from: path.join(__dirname, 'sub_package/wxcomponents'),
			to: path.join(__dirname, 'dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev',
				'mp-weixin', 'sub_package/wxcomponents')
		}])
	]
}

后面要加上unpackage才行,猜测是dist是在unpackage下,要完整的设置路径

相关推荐

  1. uniapp程序-分享

    2023-12-05 17:40:11       32 阅读
  2. uniapp 引入h5页面

    2023-12-05 17:40:11       26 阅读
  3. uniapp引入微信程序直播组件

    2023-12-05 17:40:11       35 阅读
  4. Uniapp 和Vue3 程序 获取页面dom 方法

    2023-12-05 17:40:11       22 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-05 17:40:11       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-05 17:40:11       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-05 17:40:11       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-05 17:40:11       18 阅读

热门阅读

  1. Ubuntu18.04安装LVI-SAM保姆级教程

    2023-12-05 17:40:11       36 阅读
  2. webpack的plugin和loader的区别

    2023-12-05 17:40:11       35 阅读
  3. ubuntu22.04更新内核后无wifi选项

    2023-12-05 17:40:11       40 阅读
  4. 【开发规范】前端开发中引用文件的方式

    2023-12-05 17:40:11       39 阅读
  5. 前端开启gzip优化页面加载速度

    2023-12-05 17:40:11       32 阅读
  6. 前端学习笔记

    2023-12-05 17:40:11       40 阅读
  7. MacBook续命,XCode硬盘占用问题

    2023-12-05 17:40:11       42 阅读
  8. base64转PDF

    2023-12-05 17:40:11       38 阅读
  9. Flutter, pub 无法安装依赖 等问题

    2023-12-05 17:40:11       36 阅读
  10. Redis 集群搭建 哨兵模式搭建

    2023-12-05 17:40:11       35 阅读
  11. netstat

    netstat

    2023-12-05 17:40:11      38 阅读