实现vue3版本uniapp hbuilder 转 vue-cli

有个开源项目是用hbuilder编译的,现在想通过vue cli实现。本文记录过程中的采坑

创建一个空的uni-app工程

npx degit dcloudio/uni-preset-vue#vite my-vue3-project

 然后把之前项目里的文件搬过来,如果嫌麻烦,也可以把这个项目package.json里的,把scripts、dependencies、devDependencies合并一下,创建一个src文件夹,把该搬到src里面的搬到src里面。

问题解决

没有sass

直接安装一下就行,我安装的是1.57.1。

Failed to resolve import "@vue/composition-api/dist/vue-composition-api.mjs"

这个是pinia会用到的,按照提示,我尝试了npm i --save @vue/composition-api会报如下错误:

Could not resolve dependency: npm ERR! peer vue@">= 2.5 < 2.7" from @vue/[email protected].

这个本质上是uniapp用的vite版本的问题,是4,改成了3就可以了。附录里的,devDependencies有写"vite": "3.2.4"。

附录

下面是我使用到的package.json里面的一些需要合并的东西

"scripts": {
    "dev:app": "uni -p app",
    "dev:app-android": "uni -p app-android",
    "dev:app-ios": "uni -p app-ios",
    "dev:custom": "uni -p",
    "dev:h5": "uni",
    "dev:h5:ssr": "uni --ssr",
    "dev:mp-alipay": "uni -p mp-alipay",
    "dev:mp-baidu": "uni -p mp-baidu",
    "dev:mp-kuaishou": "uni -p mp-kuaishou",
    "dev:mp-lark": "uni -p mp-lark",
    "dev:mp-qq": "uni -p mp-qq",
    "dev:mp-toutiao": "uni -p mp-toutiao",
    "dev:mp-weixin": "uni -p mp-weixin",
    "dev:quickapp-webview": "uni -p quickapp-webview",
    "dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
    "dev:quickapp-webview-union": "uni -p quickapp-webview-union",
    "build:app": "uni build -p app",
    "build:app-android": "uni build -p app-android",
    "build:app-ios": "uni build -p app-ios",
    "build:custom": "uni build -p",
    "build:h5": "uni build",
    "build:h5:ssr": "uni build --ssr",
    "build:mp-alipay": "uni build -p mp-alipay",
    "build:mp-baidu": "uni build -p mp-baidu",
    "build:mp-kuaishou": "uni build -p mp-kuaishou",
    "build:mp-lark": "uni build -p mp-lark",
    "build:mp-qq": "uni build -p mp-qq",
    "build:mp-toutiao": "uni build -p mp-toutiao",
    "build:mp-weixin": "uni build -p mp-weixin",
    "build:quickapp-webview": "uni build -p quickapp-webview",
    "build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
    "build:quickapp-webview-union": "uni build -p quickapp-webview-union"
  },
 "dependencies": {
    "@dcloudio/uni-app": "3.0.0-3070320230222002",
    "@dcloudio/uni-app-plus": "3.0.0-3070320230222002",
    "@dcloudio/uni-components": "3.0.0-3070320230222002",
    "@dcloudio/uni-h5": "3.0.0-3070320230222002",
    "@dcloudio/uni-mp-alipay": "3.0.0-3070320230222002",
    "@dcloudio/uni-mp-baidu": "3.0.0-3070320230222002",
    "@dcloudio/uni-mp-kuaishou": "3.0.0-3070320230222002",
    "@dcloudio/uni-mp-lark": "3.0.0-3070320230222002",
    "@dcloudio/uni-mp-qq": "3.0.0-3070320230222002",
    "@dcloudio/uni-mp-toutiao": "3.0.0-3070320230222002",
    "@dcloudio/uni-mp-weixin": "3.0.0-3070320230222002",
    "@dcloudio/uni-quickapp-webview": "3.0.0-3070320230222002",
    "@hyoga/uni-socket.io": "^1.0.1",
    "dayjs": "^1.11.6",
    "lodash": "^4.17.21",
    "luch-request": "^3.0.8",
    "pinia": "^2.0.24",
    "pinia-plugin-persist-uni": "^1.2.0",
    "qs-canvas": "^1.0.11",
    "sass": "1.57.1",
    "vue": "^3.2.45",
    "vue-i18n": "^9.1.9",
    "weixin-js-sdk": "^1.6.0"
  },
  "devDependencies": {
    "@dcloudio/types": "^3.3.2",
    "@dcloudio/uni-automator": "3.0.0-3070320230222002",
    "@dcloudio/uni-cli-shared": "3.0.0-3070320230222002",
    "@dcloudio/uni-stacktracey": "3.0.0-3070320230222002",
    "@dcloudio/vite-plugin-uni": "3.0.0-3070320230222002",
    "vconsole": "^3.15.0",
    "vite": "3.2.4"
  }

猜你喜欢

转载自blog.csdn.net/qq_27575627/article/details/129686615