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