HbuilderX工程改造成Vue-cli工程#uni-app(h5)项目改造#前端项目重构

由HbuilderX开发的H5项目搭建时采用的视图工具发布打包，现需要将前端源代码托管至IRS平台，原有的打包方式不能满足业务要求，所以本篇文章将记录如何将一个只能在HbuilderX工具打包的uni-app项目改造成可以适用vs-code工具的h5项目。

weixin_53099292

1573人浏览 · 2025-05-15 17:21:29

weixin_53099292 · 2025-05-15 17:21:29 发布

引言

1.项目源文件结构改变

首先看下我们改造前和改造后的项目文件结构对比：

因为我们改造的本质是将原本的项目支持vue-cli-service 通过npm run buuild打包，而原本项目是通过uni-cli工具打包的，想要更快解决此类问题我们必须要清除二者的区别：

前端npm run build打包‌：使用标准的npm脚本进行打包，通常在package.json中的scripts部分定义。例如，"build": "vue-cli-service build"。这种方式依赖于具体的框架（如Vue.js）提供的构建工具。
‌uni-app打包‌：使用HBuilderX或uni-cli工具进行打包。HBuilderX是官方推荐的IDE，支持代码高亮、智能提示、实时预览等功能。uni-cli则适用于命令行操作，支持创建项目、编译发行等操作，但某些功能（如云端打包）可能需要配合HBuilderX使用。
二者本质没什么区别，无非是HbuilderX工具底层对webpack及npm run build npm run serve等指令进行再封装。

我们不可能去做HbuilderX工具底层逻辑的改变所以个人认为最便利的方式就是将vue-cli与uni-cli联系起来，不妨将原本的uni-app项目当做盒子我们在外面再包一层vue-cli的服务，通过文件结构的改变我们也可以大概了解到原本的uni-app项目基本是不需要改动的。

2.搭建外壳(vue-cli),配置文件处理

我们先按照vue项目搭建一个新框架，直接将原来的uni-app项目整个放入src文件，因为我们后续就在vs-code开发此项目了所以.hbuilderx这个启动文件就可以去掉了，剩下的文件原封不动放入src下。文件结构变了后我们及时在vue,config.js的configureWebpack里配置我们的文件指向，现在就指向src了，下面代码可做参考。

configureWebpack: {

		resolve: {
			alias: {
				// 关键：确保别名指向正确目录
				'@': path.resolve(__dirname, 'src'), // @ 指向根目录
				'@src': path.resolve(__dirname, 'src'), // 如果有 src 目录
				'@utils': path.resolve(__dirname, 'utils'), // 手动指定具体路径
				'@plugin': path.resolve(__dirname, 'plugin'),
				'@mock': path.resolve(__dirname, 'mock'),
				'@apis': path.resolve(__dirname, 'apis')
			}
		}
	},

下面我们继续做配置文件的完善，由于此项目是由uni-app改造那么就需要考虑到对于uni-app的样式处理。我们需要做一下uni-app 项目 的 PostCSS 配置，在postcss.config.js文件里加入下列代码：

const path = require('path')
const webpack = require('webpack')
const config = {
  parser: require('postcss-comment'),
  plugins: [
    require('postcss-import')({
      resolve (id, basedir, importOptions) {
        if (id.startsWith('~@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
        } else if (id.startsWith('@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
        } else if (id.startsWith('/') && !id.startsWith('//')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
        }
        return id
      }
    }),
    require('autoprefixer')({
      remove: process.env.UNI_PLATFORM !== 'h5'
    }),
    require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
  ]
}
if (webpack.version[0] > 4) {
  delete config.parser
}
module.exports = config

由于项目中使用到了ui库我们需要先做 @import 语句的路径解析，其次@dcloudio/vue-cli-plugin-uni/packages/postcss插件的作用就是对uni-app的样式单位转换，其余不做解释。其余的eslint配置和语法配置我们可以自行搜索配置即可。至于某些文件我们如果不想被校验将该文件名记录到.eslintignore文件即可。如此，我们的vue框架已经基本完成了，下面将会对最关键的依赖项配置做处理。

3.依赖配置，兼容性问题处理。

依赖兼容处理这快是我们项目重构的关键也是最头疼的地方，我在处理这块的时候也是到处踩坑，后面将会列出几个经典问题供大家参考。我们要做vue-cli与uni-cli的搭桥，首先要下载vue-cli-serve服务，因为我们要求使用node14版本，所以我选择的4.5.14的vue-cli-serve，如果大家对node版本没要求建议下载最新版或者是5.0.0以上的兼容性更好。然后我们将原来项目项目中所需的依赖都加进package.json中。

3.1 安装uni-ui,先安装 sass和,less

由于HBuilderX自带插件帮我们安装了less-loader或者sass-loader，我们需要先删除在重新下载。

npm i sass -D
npm i sass-loader@12.4.0 -D

如果使用了less就需要安装less和lessloader

npm i less less-loader@7.3.0 -D

3.2 安装配置ui插件

如果项目中使用到了ui插件我们需要配置 easycom 规则，让 npm 安装的组件支持 easycom

打开项目src目录下的 pages.json 并添加 easycom 节点：

{
	"easycom": {
		"^zh-(.*)": "@/utils/zh-ui/components/zh-$1/zh-$1.vue"
	},
	"pages": [{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "xxxx"
			}
		}]
}

3.3 引入项目构建和编译的核心包

（以下参考代码仅适用node14版本，如需22等高版本的可在本篇内容最后处查看，注：高版本适用于vite对webpack可能存在兼容性问题）

我们接着在package.json中添加我们项目工程的核心包如@dcloudio/vue-cli-plugin-uni、@dcloudio/vue-cli-plugin-uni-optimize。版本我们就选择官网的最新版本，下面代码供参考：

{
  "name": "my-project",
  "version": "1.0.0",
  "main": "main.js",
  "license": "MIT",
  "private": true,
  "scripts": {
    "serve": "npm run dev:h5",
    "build": "npm run build:h5",
    "build:app-plus": "cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build",
    "build:custom": "cross-env NODE_ENV=production uniapp-cli custom",
    "build:h5": "cross-env UNI_OUTPUT_DIR=build NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
    "build:mp-360": "cross-env NODE_ENV=production UNI_PLATFORM=mp-360 vue-cli-service uni-build",
    "build:mp-alipay": "cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build",
    "build:mp-baidu": "cross-env NODE_ENV=production UNI_PLATFORM=mp-baidu vue-cli-service uni-build",
    "build:mp-harmony": "cross-env NODE_ENV=production UNI_PLATFORM=mp-harmony vue-cli-service uni-build",
    "build:mp-jd": "cross-env NODE_ENV=production UNI_PLATFORM=mp-jd vue-cli-service uni-build",
    "build:mp-kuaishou": "cross-env NODE_ENV=production UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build",
    "build:mp-lark": "cross-env NODE_ENV=production UNI_PLATFORM=mp-lark vue-cli-service uni-build",
    "build:mp-qq": "cross-env NODE_ENV=production UNI_PLATFORM=mp-qq vue-cli-service uni-build",
    "build:mp-toutiao": "cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build",
    "build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    "build:mp-xhs": "cross-env NODE_ENV=production UNI_PLATFORM=mp-xhs vue-cli-service uni-build",
    "build:quickapp-native": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-native vue-cli-service uni-build",
    "build:quickapp-webview": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview vue-cli-service uni-build",
    "build:quickapp-webview-huawei": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build",
    "build:quickapp-webview-union": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build",
    "dev:app-plus": "cross-env NODE_ENV=development UNI_PLATFORM=app-plus vue-cli-service uni-build --watch",
    "dev:custom": "cross-env NODE_ENV=development uniapp-cli custom",
    "dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",
    "dev:mp-360": "cross-env NODE_ENV=development UNI_PLATFORM=mp-360 vue-cli-service uni-build --watch",
    "dev:mp-alipay": "cross-env NODE_ENV=development UNI_PLATFORM=mp-alipay vue-cli-service uni-build --watch",
    "dev:mp-baidu": "cross-env NODE_ENV=development UNI_PLATFORM=mp-baidu vue-cli-service uni-build --watch",
    "dev:mp-harmony": "cross-env NODE_ENV=development UNI_PLATFORM=mp-harmony vue-cli-service uni-build --watch",
    "dev:mp-jd": "cross-env NODE_ENV=development UNI_PLATFORM=mp-jd vue-cli-service uni-build --watch",
    "dev:mp-kuaishou": "cross-env NODE_ENV=development UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build --watch",
    "dev:mp-lark": "cross-env NODE_ENV=development UNI_PLATFORM=mp-lark vue-cli-service uni-build --watch",
    "dev:mp-qq": "cross-env NODE_ENV=development UNI_PLATFORM=mp-qq vue-cli-service uni-build --watch",
    "dev:mp-toutiao": "cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --watch",
    "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
    "dev:mp-xhs": "cross-env NODE_ENV=development UNI_PLATFORM=mp-xhs vue-cli-service uni-build --watch",
    "dev:quickapp-native": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-native vue-cli-service uni-build --watch",
    "dev:quickapp-webview": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview vue-cli-service uni-build --watch",
    "dev:quickapp-webview-huawei": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build --watch",
    "dev:quickapp-webview-union": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build --watch",
    "info": "node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js",
    "serve:quickapp-native": "node node_modules/@dcloudio/uni-quickapp-native/bin/serve.js",
    "test:android": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=android jest -i",
    "test:h5": "cross-env UNI_PLATFORM=h5 jest -i",
    "test:ios": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=ios jest -i",
    "test:mp-baidu": "cross-env UNI_PLATFORM=mp-baidu jest -i",
    "test:mp-weixin": "cross-env UNI_PLATFORM=mp-weixin jest -i"
  },
  "dependencies": {
    "@dcloudio/uni-app": "^2.0.2-4060420250429001",
    "@dcloudio/uni-app-plus": "^2.0.2-4060420250429001",
    "@dcloudio/uni-h5": "^2.0.2-4060420250429001",
    "@dcloudio/uni-i18n": "^2.0.2-4060420250429001",
    "@dcloudio/uni-mp-360": "^2.0.2-4060420250429001",
    "@dcloudio/uni-mp-alipay": "^2.0.2-4060420250429001",
    "@dcloudio/uni-mp-baidu": "^2.0.2-4060420250429001",
    "@dcloudio/uni-mp-harmony": "^2.0.2-4060420250429001",
    "@dcloudio/uni-mp-jd": "^2.0.2-4060420250429001",
    "@dcloudio/uni-mp-kuaishou": "^2.0.2-4060420250429001",
    "@dcloudio/uni-mp-lark": "^2.0.2-4060420250429001",
    "@dcloudio/uni-mp-qq": "^2.0.2-4060420250429001",
    "@dcloudio/uni-mp-toutiao": "^2.0.2-4060420250429001",
    "@dcloudio/uni-mp-vue": "^2.0.2-4060420250429001",
    "@dcloudio/uni-mp-weixin": "^2.0.2-4060420250429001",
    "@dcloudio/uni-mp-xhs": "^2.0.2-4060420250429001",
    "@dcloudio/uni-quickapp-native": "^2.0.2-4060420250429001",
    "@dcloudio/uni-quickapp-webview": "^2.0.2-4060420250429001",
    "@dcloudio/uni-stacktracey": "^2.0.2-4060420250429001",
    "@dcloudio/uni-stat": "^2.0.2-4060420250429001",
    "@vue/shared": "^3.0.0",
    "@dcloudio/uni-ui": "^1.1.3",
    "@vant/popperjs": "^1.3.0",
    "core-js": "^3.8.3",
    "flyio": "^0.6.2",
    "sass": "^1.75.0",
    "sass-loader": "^12.4.0",
    "vue": ">= 2.6.14 < 2.7",
    "vuex": "^3.2.0",
    "animate.css": "^4.1.0",
    "dayjs": "^1.8.17",
    "gdt-jsapi": "^1.9.51",
    "less": "^4.3.0",
    "less-loader": "^7.3.0",
    "lodash": "^4.17.21",
    "md5": "^2.2.1",
    "query-string": "^6.9.0",
    "ramda": "^0.27.0",
    "uview-ui": "^2.0.38",
    "validator": "^13.0.0",
    "vant": "^2.13.2",
    "vuex-persistedstate": "^2.7.0"
  },
  "devDependencies": {
    "@dcloudio/types": "^3.4.15",
    "@dcloudio/uni-automator": "^2.0.2-4060420250429001",
    "@dcloudio/uni-cli-i18n": "^2.0.2-4060420250429001",
    "@dcloudio/uni-cli-shared": "^2.0.2-4060420250429001",
    "@dcloudio/uni-helper-json": "*",
    "@dcloudio/uni-migration": "^2.0.2-4060420250429001",
    "@dcloudio/uni-template-compiler": "^2.0.2-4060420250429001",
    "@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.2-4060420250429001",
    "@dcloudio/vue-cli-plugin-uni": "^2.0.2-4060420250429001",
    "@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.2-4060420250429001",
    "@dcloudio/webpack-uni-mp-loader": "^2.0.2-4060420250429001",
    "@dcloudio/webpack-uni-pages-loader": "^2.0.2-4060420250429001",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-service": "^4.5.14",
    "cross-env": "^7.0.3",
    "jest": "^25.4.0",
    "postcss-comment": "^2.0.0",
    "vue-cli-plugin-uni": "^0.0.11",
    "vue-template-compiler": ">= 2.6.14 < 2.7",
    "babel-plugin-import": "^1.13.8",
    "eslint": "^6.8.0",
    "eslint-config-airbnb-base": "^14.2.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-vue": "^6.2.2",
    "mockjs": "^1.1.0",
    "vconsole": "^3.15.1"
  },
  "browserslist": [
    "Android >= 4.4",
    "ios >= 9"
  ],
  "resolutions": {
    "postcss-urlrewrite": "0.2.0",
    "chokidar": "3.5.2",
    "commander": "^7.2.0"
  },
  "uni-app": {
    "scripts": {}
  }
}

我们通过将vue-cli服务成功注入项目这样就可以使用npm 的各种指令，不过生产环境构建时本质上我们还是使用的uni-build打包，所以打包输出的文件路径和使用HbuilderX是一致的，默认是dist/build/h5。如果我们想改变生产包输出文件路径，我们可以做如下操作：

3.3.1.打包输出文件路径配置（package.json）

package.json文件里具体的指令加上UNI_OUTPUT_DIR=build，这里的build替换为想要的路径。

"build:h5": "cross-env UNI_OUTPUT_DIR=build NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",

3.3.2.打包输出文件路径配置（manifest.json）

manifest.json文件里加上outputDir选项，文件路径要和上面一致。

"h5": {
    "outputDir": "build",
    "publicPath": "./",
    "template": "index.html",
    "title": "滨江统计",
    "router": {
      "mode": "hash",
      // "base" : "/h5"
      "base": "./"
    }
  },

3.3.3.打包输出文件路径配置（vue.config.js）

vue.config.js文件里加上outputDir选项，文件路径同上

module.exports = {
	lintOnSave: false,
	publicPath: process.env.NODE_ENV === 'production' ? './' : './',
	outputDir: 'build',
	productionSourceMap: false,
}

至此我们的项目改造已经完成了，如果大家在改造的过程遇到了问题可以接着往下看，下面是我遇到的一些问题希望可以帮到大家。

4.高版本node下载依赖

适用于node22版本依赖（vite可用）

{
  "name": "test-uniapp-clean",
  "version": "1.0.0",
  "private": true,
  "license": "MIT",
  "scripts": {
    "serve": "npm run dev:h5",
    "build": "npm run build:h5",
    "build:app-plus": "cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build",
    "build:custom": "cross-env NODE_ENV=production uniapp-cli custom",
    "build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
    "build:mp-360": "cross-env NODE_ENV=production UNI_PLATFORM=mp-360 vue-cli-service uni-build",
    "build:mp-alipay": "cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build",
    "build:mp-baidu": "cross-env NODE_ENV=production UNI_PLATFORM=mp-baidu vue-cli-service uni-build",
    "build:mp-harmony": "cross-env NODE_ENV=production UNI_PLATFORM=mp-harmony vue-cli-service uni-build",
    "build:mp-jd": "cross-env NODE_ENV=production UNI_PLATFORM=mp-jd vue-cli-service uni-build",
    "build:mp-kuaishou": "cross-env NODE_ENV=production UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build",
    "build:mp-lark": "cross-env NODE_ENV=production UNI_PLATFORM=mp-lark vue-cli-service uni-build",
    "build:mp-qq": "cross-env NODE_ENV=production UNI_PLATFORM=mp-qq vue-cli-service uni-build",
    "build:mp-toutiao": "cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build",
    "build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    "build:mp-xhs": "cross-env NODE_ENV=production UNI_PLATFORM=mp-xhs vue-cli-service uni-build",
    "build:quickapp-native": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-native vue-cli-service uni-build",
    "build:quickapp-webview": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview vue-cli-service uni-build",
    "build:quickapp-webview-huawei": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build",
    "build:quickapp-webview-union": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build",
    "dev:app-plus": "cross-env NODE_ENV=development UNI_PLATFORM=app-plus vue-cli-service uni-build --watch",
    "dev:custom": "cross-env NODE_ENV=development uniapp-cli custom",
    "dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",
    "dev:mp-360": "cross-env NODE_ENV=development UNI_PLATFORM=mp-360 vue-cli-service uni-build --watch",
    "dev:mp-alipay": "cross-env NODE_ENV=development UNI_PLATFORM=mp-alipay vue-cli-service uni-build --watch",
    "dev:mp-baidu": "cross-env NODE_ENV=development UNI_PLATFORM=mp-baidu vue-cli-service uni-build --watch",
    "dev:mp-harmony": "cross-env NODE_ENV=development UNI_PLATFORM=mp-harmony vue-cli-service uni-build --watch",
    "dev:mp-jd": "cross-env NODE_ENV=development UNI_PLATFORM=mp-jd vue-cli-service uni-build --watch",
    "dev:mp-kuaishou": "cross-env NODE_ENV=development UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build --watch",
    "dev:mp-lark": "cross-env NODE_ENV=development UNI_PLATFORM=mp-lark vue-cli-service uni-build --watch",
    "dev:mp-qq": "cross-env NODE_ENV=development UNI_PLATFORM=mp-qq vue-cli-service uni-build --watch",
    "dev:mp-toutiao": "cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --watch",
    "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
    "dev:mp-xhs": "cross-env NODE_ENV=development UNI_PLATFORM=mp-xhs vue-cli-service uni-build --watch",
    "dev:quickapp-native": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-native vue-cli-service uni-build --watch",
    "dev:quickapp-webview": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview vue-cli-service uni-build --watch",
    "dev:quickapp-webview-huawei": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build --watch",
    "dev:quickapp-webview-union": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build --watch",
    "info": "node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js",
    "serve:quickapp-native": "node node_modules/@dcloudio/uni-quickapp-native/bin/serve.js",
    "test:android": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=android jest -i",
    "test:h5": "cross-env UNI_PLATFORM=h5 jest -i",
    "test:ios": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=ios jest -i",
    "test:mp-baidu": "cross-env UNI_PLATFORM=mp-baidu jest -i",
    "test:mp-weixin": "cross-env UNI_PLATFORM=mp-weixin jest -i"
  },
  "dependencies": {
    "@dcloudio/uni-app": "^2.0.2-4050720250324001",
    "@dcloudio/uni-app-plus": "^2.0.2-4050720250324001",
    "@dcloudio/uni-h5": "^2.0.2-4050720250324001",
    "@dcloudio/uni-i18n": "^2.0.2-4050720250324001",
    "@dcloudio/uni-mp-360": "^2.0.2-4050720250324001",
    "@dcloudio/uni-mp-alipay": "^2.0.2-4050720250324001",
    "@dcloudio/uni-mp-baidu": "^2.0.2-4050720250324001",
    "@dcloudio/uni-mp-harmony": "^2.0.2-4050720250324001",
    "@dcloudio/uni-mp-jd": "^2.0.2-4050720250324001",
    "@dcloudio/uni-mp-kuaishou": "^2.0.2-4050720250324001",
    "@dcloudio/uni-mp-lark": "^2.0.2-4050720250324001",
    "@dcloudio/uni-mp-qq": "^2.0.2-4050720250324001",
    "@dcloudio/uni-mp-toutiao": "^2.0.2-4050720250324001",
    "@dcloudio/uni-mp-vue": "^2.0.2-4050720250324001",
    "@dcloudio/uni-mp-weixin": "^2.0.2-4050720250324001",
    "@dcloudio/uni-mp-xhs": "^2.0.2-4050720250324001",
    "@dcloudio/uni-quickapp-native": "^2.0.2-4050720250324001",
    "@dcloudio/uni-quickapp-webview": "^2.0.2-4050720250324001",
    "@dcloudio/uni-stacktracey": "^2.0.2-4050720250324001",
    "@dcloudio/uni-stat": "^2.0.2-4050720250324001",
    "@vue/shared": "^3.0.0",
    "animate.css": "^4.1.1",
    "core-js": "^3.8.3",
    "dayjs": "^1.11.13",
    "flyio": "^0.6.2",
    "gdt-jsapi": "^1.9.51",
    "less": "^4.3.0",
    "less-loader": "^12.2.0",
    "lodash": "^4.17.21",
    "md5": "^2.3.0",
    "mockjs": "^1.1.0",
    "query-string": "^9.1.1",
    "ramda": "^0.30.1",
    "sass": "^1.87.0",
    "sass-loader": "^16.0.5",
    "scss": "^0.2.4",
    "scss-loader": "^0.0.1",
    "uview-ui": "^2.0.38",
    "validator": "^13.15.0",
    "vant": "^2.13.7",
    "vconsole": "^3.15.1",
    "vue": ">= 2.6.14 < 2.7",
    "vuex": "^3.2.0",
    "vuex-persistedstate": "^4.1.0"
  },
  "devDependencies": {
    "@dcloudio/types": "^3.3.2",
    "@dcloudio/uni-automator": "^2.0.2-4050720250324001",
    "@dcloudio/uni-cli-i18n": "^2.0.2-4050720250324001",
    "@dcloudio/uni-cli-shared": "^2.0.2-4050720250324001",
    "@dcloudio/uni-helper-json": "*",
    "@dcloudio/uni-migration": "^2.0.2-4050720250324001",
    "@dcloudio/uni-template-compiler": "^2.0.2-4050720250324001",
    "@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.2-4050720250324001",
    "@dcloudio/vue-cli-plugin-uni": "^2.0.2-4050720250324001",
    "@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.2-4050720250324001",
    "@dcloudio/webpack-uni-mp-loader": "^2.0.2-4050720250324001",
    "@dcloudio/webpack-uni-pages-loader": "^2.0.2-4050720250324001",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "babel-plugin-import": "^1.13.8",
    "cross-env": "^7.0.2",
    "jest": "^25.4.0",
    "postcss-comment": "^2.0.0",
    "vue-template-compiler": ">= 2.6.14 < 2.7"
  },
  "browserslist": [
    "Android >= 4.4",
    "ios >= 9"
  ],
  "uni-app": {
    "scripts": {}
  }
}

所遇问题总结（持续更新）

1.node内存溢出，内存泄露问题

错误提示中，会有“JavaScript heap out of memory”，如下图：

我们首先检查我们的入口文件main.js及app.vue文件是否存在循环调用溢出或者垃圾未能及时清理，然后就是所引入的文件了（重点是私有库）我的项目是引入了私有的ui库,样式文件存在样式循环调用导致内存溢出。

2.引入vant-ui库报样式入口文件错误

或者：

 error  in ../node_modules/vant/lib/index.less

TypeError: this.getOptions is not a function

这两个问题都和我们下载less-loader版本有关，原因我们是使用node14版本，必须要使用低版本的less及less-loader（16以上版本的node暂未发现出现此问题）,node14版本可以下载以下版本less:

"less": "^4.3.0",
 "less-loader": "^7.3.0",

也可以避免全局引入vant，选择按需引入。

3.uni-app与vue类型兼容错误

Property 'onLoad' does not exist on type 'ComponentOptions<Vue>'.

或者构建错误：

npm run build

# 输出
ERROR in src/pages/index.vue
Type error: Property 'onLoad' does not exist on type...

出现以上两种错误的情况下我们需要先引入类型包（包含小程序和 Vue 扩展的类型）：

npm install @dcloudio/types --save-dev

然后创建shims-uni.d.ts文件并在文件中添加以下配置：

/// <reference types='@dcloudio/types' />
import Vue from 'vue'
declare module "vue/types/options" {
  type Hooks = App.AppInstance & Page.PageInstance;
  interface ComponentOptions<V extends Vue> extends Hooks {
    /**
     * 组件类型
     */
    mpType?: string;
  }
}

这样确保我们改造后的项目实现uni-app和vue的类型兼容我们就可以在vue项目中使用uni-app的类型声明了。

4.Node.js 进程崩溃问题

原因node内存分配过小，报错如下：

：t 00007FF6EB6C7042 v8::internal::SetupIsolateDelegate::SetupHeap+40498e+1516 succeed     ler+84
38: 0000038636844E1F v8::internal::FactoryBase<v8::internal::Factory>::NewFixedArray+69
npm ERR! code ELIFECYCLE:internal::Isolate::CaptureSimpleStackTrace+2314+57503
npm ERR! errno 134
npm ERR! test-uniapp@1.0.0 build: `vue-cli-service build`
npm ERR! Exit status 134
npm ERR!
npm ERR! Failed at the test-uniapp@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
33: 00007FF6EB57AAA1 v8::internal::MessageHandler::MakeMessageObject+3374
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2025-04-25T09_46_42_970Z-debug.log
PS E:\公司项目\统计局-app\statis_mobile_front> Delegate::SetupHeap+164412055.6) -> 2044.2 (2055.3) MB, 1335.5 / 0.1 ms  
37:erage mu = 0.514, current mu = 0.050) allocation failure sc

我们可在打包指令中更新分配内存：

"build": "node --max-old-space-size=4096 cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build"

5.Sass的@import导入规则报错

Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

  ╷
3 │ @import './style/color.scss';
  │         ^^^^^^^^^^^^^^^^^^^^
  ╵
    ..\node_modules\zh-ui\index.scss 3:9  @import

这是因为Dart Sass 1.63+ 对 @import 的弃用，我们可以改用 @use 或 @forward。若项目中或第三方库仍使用旧语法，则会产生报错。

6.synp解决依赖冲突方案（适用于较少依赖兼容性问题）

遇到某一个或较少依赖版本兼容性问题，我们可以先使用yarn命令下载依赖因为yarn底层会做自动处理各个依赖的兼容性问题，然后拿生成的yarn.lock使用synp做package-lock.json的转换。

首先全局下载synp工具：

npm install -g synp

接着进项目运行synp命令做转换：（如果是package-lock.json->yarn.lock则将下面代码里的yarn.lock换为package-lock.json）

synp --source-file yarn.lock

最后根据生成的package-lock.json重新npm install即可。

技术共进，成长同行——讯飞AI开发者社区

更多推荐

机器学习与人工智能

python# 创建基类# 定义一对多关系# 定义多对一关系# 定义多对多关系（通过关联表）# 关联表（用于多对多关系）SQLAlchemy ORM提供了强大而灵活的数据库操作方式，通过本文的介绍，您应该能够：安装和配置SQLAlchemy定义数据模型和关系执行基本的CRUD操作构建复杂查询管理数据库事务遵循最佳实践SQLAlchemy还有更多高级特性，如混合属性、事件监听、自定义查询等，值得进一

讯飞AI开发者社区

读人形机器人21全球经济格局

1.7.1. 随着机器人接管常规任务，社会对技能的需求转向与自动化互补的技能，包括编程、维护、人工智能开发以及需要创造力、情感智能和复杂人际互动的工作。4.7.1. 为机器人技术和AI制定明确的规章制度，能够确保安全、增进信任，并促进其应用，包括产品安全、数据保护、有道德和负责任地使用AI等方面的标准。初创公司和老牌公司都在投资开发医疗机器人，以提升医疗服务的可及性和质量。2.1.2. 随着对机器