[已解决]编译时报错: Error: Cannot find module '@dcloudio/webpack-uni-mp-loader/lib/style.js
[已解决]编译时报错: Error: EBUSY: resource busy or locked, unlink 'E:\h5\zmn-mp\dist\build\mp-alipay\debug.log'
[已解决]h5项目页面白屏,提示网络连接超时
平台差异代码,持续更新
集成友盟+统计支付宝小程序找不到@alipay/af-appx包的错误
[已解决]小程序里面开通js的sourcemap源代码调试功能(191024)

1. [已解决]编译时报错: Error: Cannot find module '@dcloudio/webpack-uni-mp-loader/lib/style.js

业务背景

一个开发好的项目,换一台电脑,从git上拉下来,install之后运行,经常会报各种各样的错误

问题解决

删除掉package.json.lock文件
然后重新安装

原因分析

因为uni-app版本号是用的*号,每次安装时都会下载最新的
如果之前下载安装过,其他插件都会生成一个固定版本
当uni-app更新后,其他插件没有更新,就会导致各种错误
所以删除掉lock文件,全部重新下载.都会是最新的

2. [已解决]编译时报错: Error: EBUSY: resource busy or locked, unlink 'E:\h5\zmn-mp\dist\build\mp-alipay\debug.log'

业务背景

使用uni-app开发支付宝小程序
在支付宝小程序开发者工具中进行调试

报错内容

E:\h5\zmn-mp>npm run build:mp-alipay

> c@0.1.0 build:mp-alipay E:\h5\zmn-mp
> cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build

当前项目编译模式：非自定义组件模式。编译模式差异见：https://ask.dcloud.net.cn/article/35843

 ERROR  Error: EBUSY: resource busy or locked, unlink 'E:\h5\zmn-mp\dist\build\mp-alipay\debug.log'
Error: EBUSY: resource busy or locked, unlink 'E:\h5\zmn-mp\dist\build\mp-alipay\debug.log'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! c@0.1.0 build:mp-alipay: `cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the c@0.1.0 build:mp-alipay script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\LJ\AppData\Roaming\npm-cache\_logs\2019-07-03T06_48_35_867Z-debug.log

复现步骤

build:mp-alipay打包小程序文件
支付宝小程序开发者工具打开编译目录
会自动在根目录下生成一个debug.log
再次build:mp-alipay就会报错

问题分析

小程序开发者工具正在使用debug.log文件
而build:mp-alipay的时候会清空整个dist目录
删除一个正在使用的文件肯定会报错

临时解决

重新build之前
先退出支付宝小程序开发者工具
等build完之后,再打开开发者工具
2019-08-25更新,关闭模拟器面板,然后再编译,编译完之后再打开调试面板也可以

问题解决

之前不知道是什么原因
自己在webpack里面添加了webpackclean插件(而uni-app本身没本配置这个插件)
所以每次构建时都会自动清空目录
删除这个插件就好了

3. [已解决]h5项目页面白屏,提示网络连接超时

业务背景

用uni-app开发微信公众号
偶尔会在线上正式环境遇到这种情况
点击刷新之后就好了

复现步骤

目前还没找到百分百复现的方法
以后有空了再专门来测试一下

问题分析

官网介绍要在manifest.json设置h5.async.timeout超时时间
设置后问题依旧
并且不可能是手机网络问题,因为其他网页才能打开

问题解决

最后发现是因为链接请求出错导致的
页面请求的某个Js文件在服务器上已经不存在了
只是这提示有点...
为什么刷新之后又会好呢?这就和公众号的浏览器缓存有关了,在公众号开发中详细记录

4. 平台差异代码,持续更新

业务背景

在h5,小程序中,同样的代码,可能效果不一样,所以在开发的时候要避免使用这种兼容性差的语法.只能边踩坑边记录

组件props不要传递Function方法,因为在小程序里面不支持
- 使用$emit事件机制替代

<view @click="click"> // => bad

<view @click="$emit('click')"> // => good
props: {
    click: {
        type: Function,
        default: () => (() => {}},
    }
}

vuex不能通过new Vue({ store })挂载,小程序不支持这种方式
- 通过Vue.prototype.$store = store;挂载vuex

import store from './store/index';

new Vue({
    store,  // => bad
})
Vue.prototype.$store = store; // => good

引用的组件上不要使用类名,小程序不支持类穿透到组件根节点
- 如果要修改组件样式,换成/deep/写法

<uni-list class="custom"> // => bad

<uni-list>
/deep/ .uni-list // => good

5. 集成`友盟+`统计支付宝小程序找不到`@alipay/af-appx`包的错误

业务背景

公司要求,使用友盟+统计支付宝小程序流量
友盟提供了一个sdk叫umtrack-alipay
这个sdk依赖于@alipay/af-appx这个包,但是这个包没有随umtrack-alipay一起安装,并且在网络上也找不到@alipay/af-appx这个包
经测试发现,@alipay/af-appx是内置在支付宝开发者工具里面的

存在的问题

在APP.vue里面引用umtrack-alipay就会报错@alipay/af-appx找不到
但是同样的代码,在原生支付宝开发者工具里面引用是不会报这个错的

问题解决

要在打包后的main.js里面引入umtrack-alipay
但是不知道怎么配置webpack自动生成,现在是人工粘贴,编译一次粘贴一次.......

6. [已解决]小程序里面开通js的sourcemap源代码调试功能(191024)

业务背景

开发多端应用,在H5下面,js报错点击堆栈行号信息,可以跳转到报错的源代码.但是在小程序里面,代码是压缩后的,根本看不懂.所以想在小程序里面也开启sourcemap功能

问题解决

vue.config

configureWebpack: {
  devtool: 'inline-source-map',
},

原理

之前是sourcemap,在公众号可以.但是为什么在小程序里面不行呢
这两个值有啥区别呢.以后研究webpack的时候再来搞吧