在使用开源项目niucloud-admin的uni-app前端项目是,发现H5和小程序都可以正常运行,使用HBuilderX运行到手机模拟器中就会出现报错

Invalid value "iife" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds.

 后面查询资料发现如果项目在存在这个报错原因可能是

  1. vite.config.js 配置问题

    • 在 vite.config.js 中,rollupOptions.output.format 被设置为 iife 或 umd,但代码分割未被禁用。
  2. 动态导入(import())的使用

    • 如果代码中使用了动态导入(import()),会触发代码分割,而 iife 和 umd 格式不支持代码分割。
  3. 插件修改了 output.format

    • 某些插件(如 @dcloudio/vite-plugin-uni 或其他自定义插件)可能会修改 rollupOptions.output.format,导致冲突。

 1和3我都按照网上的资料进行配置了还是没有效果,然后我就在项目里面查询有没有动态导入

我通过文件查找的方式查到了在src/locale/language.ts和src/utils/interceptor.ts文件中使用 await import 动态导入,它使用的路径是../我把他替换为@路径就可以了

运行起来后发现项目有提示报错,因为找不到currentParam这个东西导致页面白屏,这个东西写在src/utils/common.ts文件里面

// 获取分享路由
export const currShareRoute = () => {
	const pages = getCurrentPages()
	if (pages.length == 0) {
		return {
			path: '/',
			params: {}
		}
	}
	let currentRoute = pages[pages.length - 1].route //获取当前页面路由

	// #ifdef H5
	let currentParam = pages[pages.length - 1].$page.options; //获取路由参数
	// #endif

	// #ifdef MP
	let currentParam = pages[pages.length - 1].options || {}; //获取路由参数
	// #endif
	// 拼接参数
	let params = {};
	for (let key in currentParam) {
		params[key] = currentParam[key]
	}
	let currentPath = '/' + currentRoute;

	return {
		path: currentPath,
		params: params
	}
}

他们没有对APP运行环境添加这个变量,自己手动给他修改一下就可以了

// 获取分享路由
export const currShareRoute = () => {
	const pages = getCurrentPages()
	if (pages.length == 0) {
		return {
			path: '/',
			params: {}
		}
	}
	let currentRoute = pages[pages.length - 1].route //获取当前页面路由

	// #ifdef H5
	let currentParam = pages[pages.length - 1].$page.options; //获取路由参数
	// #endif

	// #ifdef MP
	let currentParam = pages[pages.length - 1].options || {}; //获取路由参数
	// #endif
	// #ifdef APP         //新增APP运行环境
	let currentParam = pages[pages.length - 1].options || {}; //获取路由参数
	// #endif
	// 拼接参数
	let params = {};
	for (let key in currentParam) {
		params[key] = currentParam[key]
	}
	let currentPath = '/' + currentRoute;

	return {
		path: currentPath,
		params: params
	}
}

 然后页面就可以正常显示了,APP打包成APk后再request里面的baseUrl好像找不到,我在打包的时候编译了一个APP环境下默认把baseUrl=‘https.xxxx.com’赋值了

这个是我修改的文件路径

页面在跳转登陆的时候又会报一个错误 TypeError: path.replace(...).replaceAll is not a function

 应为我本地的es环境不是es12的没有这个方法,replaceAll 是 ES2021(ES12)中引入的一个字符串方法,用于替换所有匹配的子字符串。如果你的运行环境或构建工具不支持 ES2021,则会报这个错误。

所以我把他修改为下面这种格式

path.replace(/^\//, '').replace(/\//g, '.');

修改的文件夹在 src/locale/language.ts这里

修改APP图标中不显示问题,原因很简单,因为在项目中没有引入的如今没有指定https请求,可能导致APP环境在找不到这个icon文件导致在APP中图标失效,修改方法很简单在引入的地址的前方添加https:前缀就可以了,引入文件的目录在src/styles/iconfonts.css || src/styles/offcial-iconfonts.css这两个文件里面

希望可以给遇到这个问题的伙伴一点参考,欢迎在评论区交流,谢谢

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐