0.2.1 • Published 9 months ago
uniapp-dev-tool v0.2.1
uniapp-dev-tool
简介
uniapp-cli编译微信小程序时 同时启动开发者工具
项目地址uniapp-dev-tool
引用
改编自 open-devtools
使用
大体与原项目相同
一、构建 uni 脚手架项目
具体参考 dcloud 官网介绍:通过 vue-cli 命令行,当 uni-app 遇见 vscode
二、项目中安装扩展插件
npm i uniapp-dev-tool -D
或
yarn add uniapp-dev-tool -D
三、替换 package.json 命令
将 scripts 中所有命令中 vue-cli-service uni-build
或者是 vue-cli-service uni-build --watch
的命令替换为 uniapp-dev-tool
,例如以下实例
{
"scripts": {
"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin uniapp-dev-tool",
"build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin uniapp-dev-tool",
"...": "..."
}
}
兼容uniapp vue3的启动命令
{
"scripts": {
"dev:mp-weixin": "uniapp-dev-tool -p mp-weixin --devtools",
"build:mp-weixin": "uniapp-dev-tool build -p mp-weixin",
"...": "..."
}
}
四、生成配置文件
npx uniapp-dev-tool -e
生成.env
文件,WEIXIN_DEVTOOLS_PATH
为微信开发者工具的绝对路径
WEIXIN_DEVTOOLS_PATH=D:/Program Files (x86)/Tencent/微信web开发者工具
兼容vue3版本,默认为vue2
npx uniapp-dev-tool -e -v3
VUE_VERSION=3
五、开启开发者工具命令行
开发者工具的设置 -安全设置中开启服务端口。
六、运行项目
npm run dev:mp-weixin
注意事项
- 未支持的小程序不会自动打开调试器,但也不会使该编译命令失效
- 将所有命令都替换为
cross-env ... uniapp-dev-tool
以便后期兼容后,直接更新即可使用 - 其中配置文件换成了
.env
文件 .env
的配置也会对uniapp的编译生效WEIXIN_DEVTOOLS_PATH
未填写无法就无法启动微信开发者工具UNI_INPUT_DIR
是uniapp编译的绝对路径VUE_VERSION
是vue版本;可不写,默认为2;可选2,3