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

news2024/11/18 10:42:11

实例:小程序添加一个源生小程序插件,按照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下,要完整的设置路径

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1276352.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【报名】2023产业区块链生态日暨 FISCO BCOS 开源六周年生态大会

作为2023深圳国际金融科技节系列活动之一,由深圳市地方金融监督管理局指导,微众银行、金链盟主办的“2023产业区块链生态日暨FISCO BCOS开源六周年生态大会”将于12月15日下午14:00在深圳举办。 今年的盛会将进一步升级,以“FISCO BCOS和TA的…

C/C++,图算法——求强联通的Tarjan算法之源程序

1 文本格式 #include <bits/stdc.h> using namespace std; const int maxn 1e4 5; const int maxk 5005; int n, k; int id[maxn][5]; char s[maxn][5][5], ans[maxk]; bool vis[maxn]; struct Edge { int v, nxt; } e[maxn * 100]; int head[maxn], tot 1; vo…

Nacos多数据源插件

Nacos从2.2.0版本开始,可通过SPI机制注入多数据源实现插件,并在引入对应数据源实现后,便可在Nacos启动时通过读取application.properties配置文件中spring.datasource.platform配置项选择加载对应多数据源插件.本文档详细介绍一个多数据源插件如何实现以及如何使其生效。 注意:…

动态规划 | 139. 单词拆分、多重背包

139、单词拆分 dp[i]&#xff1a;长度为 i 的字符串可以有字典中出现的单词拼接出来。 if s[j: i] in wordDict and dp[j] true 则 dp[i] true dp[0] true, 因为后续均由dp[0]推出。 从前向后遍历 public static boolean wordBreak(String s, List<String> wordDi…

简单取证-MISC-bugku-解题步骤

——CTF解题专栏—— 题目信息&#xff1a; 题目&#xff1a;简单取证 作者&#xff1a;Tokeii 提示&#xff1a;flag格式为flag{用户名_对应的密码} 例如flag{administrator_bugku} 解题附件&#xff1a; 解题思路&#xff1a; 取证自己属实不太擅长&#xff0c;所以找个题…

JMX的使用

1. 定义和意义 JMX是Java Management Extention的缩写&#xff0c;出发点是让外部通过属性/方法来读取或设置程序状态。对于提供对外服务的程序来说&#xff0c;天生就有这样的能力&#xff0c;Web程序通过HTTP接口对外暴露&#xff0c;RPC应用通过RPC接口暴露。不过带来的问…

如何快速选出一支好股票?

俗话说得好&#xff1a;股票选得好&#xff0c;收益少不了&#xff01;不用多说&#xff0c;相信大伙儿都知道选一支好股票究竟有多重要。 但是选股可不像咱们去菜市场买菜一样&#xff0c;看着顺眼就成。选股&#xff0c;其实是一个专业性特别强的技术活儿。 目前最常用的选股…

微信开发者工具真机调试连接状态在正常和未连接之间反复横跳

开启局域网模式能解决这个问题&#xff0c;目前只找到这一个方法

详解Linux常用命令

目录 1. ps 命令 2. top 命令 3. grep 命令 4. df 命令 5. tail 命令 6. head 命令 7. cat 命令 8. --help 和 man 命令 9. cd 命令 10. mkdir 命令 11. rm 命令 12. mv 和 cp 命令 13. touch 命令 14. vi 或 vim 命令 15. chmod 修改权限 16. 打包和压缩文件 …

电子学会C/C++编程等级考试2021年12月(四级)真题解析

C/C++等级考试(1~8级)全部真题・点这里 第1题:移动路线 桌子上有一个m行n列的方格矩阵,将每个方格用坐标表示,行坐标从下到上依次递增,列坐标从左至右依次递增,左下角方格的坐标为(1,1),则右上角方格的坐标为(m,n)。 小明是个调皮的孩子,一天他捉来一只蚂蚁,不小心把…

Windows的常用cmd命令总结

文章目录 一.盘符切换二: cd命令(打开文件/文件夹)三:查看目录四.创建和删除文件夹五.查看本机ip地址六.清除当前屏幕七.复制文件到另一个地方八.移动文件到另一个地方九.删除文件&#xff08;不能删除文件夹&#xff09;十.测试网络连接十一.停止任务进程Windows快捷键总结大全…

python简单进阶之web框架:fastapi使用教程

原文&#xff1a;python简单进阶之web框架&#xff1a;fastapi使用教程 - 知乎 这是简单进阶教程系列第四篇&#xff0c;本系列文章主要介绍那些可以很快上手的进阶库。 我其实学过一段时间Django框架&#xff0c;但是半途而废了&#xff0c;我觉得可能还是简单一点的框架比较适…

瑜伽学习零基础入门,各种瑜伽教学方法全集

一、教程描述 练习瑜伽的好处多多&#xff0c;能够保证平衡健康的身体基础&#xff0c;提升气质、塑造形体、陶冶情操&#xff0c;等等。本套教程是瑜伽的组合教程&#xff0c;共由33套视频教程组合而成&#xff0c;包含了塑身纤体&#xff0c;速效瘦身&#xff0c;四季养生&a…

csp 现值计算 C语言

号&#xff1a; 202212-1 试题名称&#xff1a; 现值计算 时间限制&#xff1a; 1.0s 内存限制&#xff1a; 512.0MB 问题描述&#xff1a; 问题描述 评估一个长期项目的投资收益&#xff0c;资金的时间价值是一个必须要考虑到的因素。简单来说&#xff0c;假设…

010 数据结构_红黑树

前言 本文将会向你介绍红黑树的概念、性质&#xff0c;以及如何手撕红黑树 1 文章重点 文本首先引入红黑树的概念和性质&#xff0c;性质非常重要对于后面的插入操作来说&#xff0c;文章的核心放在了插入部分&#xff0c;另外看插入部分之前记得看声名和节点的定义哦~ 2 引…

HarmonyOs 4 (二) HelloWord

目录 一 开发工具下载安装1.1 下载安装包1.2 下载相关依赖 二 开发者注册与个人实名认证三 第一个程序2.1 创建第一个程序2.2 认识开发者界面2.3 目录结构认识2.3.1 父目录认识2.3.2 AppScope 目录2.3.3 entry目录2.3.3.1 ets 目录2.3.3.2 resources目录 2.3.4 认识配置文件2.3…

leetCode 90.子集 II + 回溯算法 + 图解 + 笔记

给你一个整数数组 nums &#xff0c;其中可能包含重复元素&#xff0c;请你返回该数组所有可能的子集&#xff08;幂集&#xff09;。 解集 不能 包含重复的子集。返回的解集中&#xff0c;子集可以按 任意顺序 排列 示例 1&#xff1a; 输入&#xff1a;nums [1,2,2] 输出…

k8s报错

报错&#xff1a; 这个错误信息表明你的容器运行时&#xff08;container runtime&#xff09;没有正常运行&#xff0c;具体是因为CRI&#xff08;容器运行时接口&#xff09;v1版本的API没有为特定的端点实现。这通常发生在使用containerd作为容器运行时时。错误信息中提到的…

Java集合(二)

1. Map 1.1 HashMap 和 Hashtable 的区别 线程是否安全&#xff1a; HashMap 是非线程安全的&#xff0c;Hashtable 是线程安全的,因为 Hashtable 内部的方法基本都经过synchronized 修饰。&#xff08;如果你要保证线程安全的话就使用 ConcurrentHashMap 吧&#xff01;&…

生物教师个人简历(精选21篇)

以下21篇简历内容以生物教师招聘需求为背景制作&#xff0c;大家可以灵活借鉴&#xff0c;希望能帮助大家在众多候选人中脱颖而出。 生物教师个人简历下载&#xff08;在线制作&#xff09;&#xff1a;百度幻主简历或huanzhuv.com 生物老师简历1&#xff1a; 求职意向 求职…