type: frontend project: 通用 app:

hdApp
ghsApp
mallApp status: doing module: 前端文档 tags:
frontend
前端文档 created: 2026-06-09 updated: 2026-06-09 sensitive: false ---

npm 安装教程

安装方式

安装node v12.16.1，只能安装这个版本，因为要和package.json里的sass版本一致： https://nodejs.org/zh-cn 这里找到历史版本： https://nodejs.org/zh-cn/download/releases

安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装vue脚手架和uni-app需要的支持： cnpm install -g @vue/cli cgi

运行方式

H5 npm run dev:h5 npm run build:h5

小程序 npm run dev:mp-weixin npm run build:mp-weixin

PC端 npm run serve npm run build

https 转为 http

把https 改变 http，好在本地部署

ghsApp/src/config.js

export const ProjectName = 'ghs'
export const APIHOST = 'http://api.shop.hzghd.com' //https 改为 http
export const IMGHOST = 'https://img.hzghd.com'
export const CURRENT_ENV = 'dev'

ghsApp/src/ext.json

{
	"extEnable": true,
	"extAppid": "wx21b7c3ef12082099",
	"directCommit": false,
	"ext": {
		"account": 12362,
		"apiHost": "http://api.shop.hzghd.com", //https 改为 http
		"socketApiHost": "api.shop.hzghd.com",
		"imgHost": "https://img.hzghd.com",
		"name":"花掌柜"
	}
}

项目里

$service 对应文件 front-end/pt/src/cool/request/index.js

我的执行，会报错，要加上的的命令

~~nvm use 12.16.1~~

~~npm install -g @vue/cli~~

npm install

~~如果使用 npm install 失败，使用下面命令：~~

npm install --registry=https://registry.npmmirror.com \
--puppeteer_download_host=https://npmmirror.com/mirrors --legacy-peer-deps

统一升级到 webpack 5

npm run dev:mp-weixin > hd@0.1.0 dev:mp-weixin > cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize 请注意运行模式下，因日志输出、sourcemap以及未压缩源码等原因，性能和包体积，均不及发行模式。若要正式发布，请点击发行菜单或使用cli发布命令进行发布 小程序各家浏览器内核及自定义组件实现机制存在差异，可能存在样式布局兼容问题，参考：https://uniapp.dcloud.io/matter?id=mp ⠋ 开始编译当前项目至 mp-weixin 平台...
TypeError: Cannot convert undefined or null to object at Function.assign (<anonymous>) at /Users/shishao/dnmp/www/front-end/hdApp/node_modules/@dcloudio/vue-cli-plugin-uni/lib/chain-webpack.js:53:34 at module.exports.tap (/Users/shishao/dnmp/www/front-end/hdApp/node_modules/webpack-chain/src/Use.js:14:20) at /Users/shishao/dnmp/www/front-end/hdApp/node_modules/@dcloudio/vue-cli-plugin-uni/lib/chain-webpack.js:53:12 at Array.forEach (<anonymous>) at /Users/shishao/dnmp/www/front-end/hdApp/node_modules/@dcloudio/vue-cli-plugin-uni/lib/chain-webpack.js:22:17 at /Users/shishao/dnmp/www/front-end/hdApp/node_modules/@vue/cli-service/lib/Service.js:268:40 at Array.forEach (<anonymous>) at Service.resolveChainableWebpackConfig (/Users/shishao/dnmp/www/front-end/hdApp/node_modules/@vue/cli-service/lib/Service.js:268:26) at PluginAPI.resolveChainableWebpackConfig (/Users/shishao/dnmp/www/front-end/hdApp/node_modules/@vue/cli-service/lib/PluginAPI.js:145:25) at module.exports (/Users/shishao/dnmp/www/front-end/hdApp/node_modules/@vue/cli-service/lib/commands/build/resolveAppConfig.js:9:22) at getWebpackConfig (/Users/shishao/dnmp/www/front-end/hdApp/node_modules/@dcloudio/vue-cli-plugin-uni/commands/build.js:89:88) at getWebpackConfigs (/Users/shishao/dnmp/www/front-end/hdApp/node_modules/@dcloudio/vue-cli-plugin-uni/commands/build.js:122:13) at build (/Users/shishao/dnmp/www/front-end/hdApp/node_modules/@dcloudio/vue-cli-plugin-uni/commands/build.js:161:26) at /Users/shishao/dnmp/www/front-end/hdApp/node_modules/@dcloudio/vue-cli-plugin-uni/commands/build.js:80:11 at Service.run (/Users/shishao/dnmp/www/front-end/hdApp/node_modules/@vue/cli-service/lib/Service.js:262:12) at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

是什么导致的，怎么解决？

1. 问题诊断

发现是 webpack 版本冲突：项目同时存在 webpack 4.47.0 和 webpack 5.100.2
uni-app 的一些依赖使用 webpack 4，但新版 Vue CLI 使用 webpack 5
Object.assign() 在处理 url-loader 配置时接收到 undefined 参数

2. 统一升级到 webpack 5

package.json 修改：

保持 @vue/cli-plugin-babel: ^5.0.0 和 @vue/cli-service: ^5.0.0
添加 webpack: ^5.0.0 显式依赖
添加 Node.js polyfills：buffer, crypto-browserify, path-browserify, stream-browserify, assert, util, url, querystring-es3, process

3. 配置 webpack 5 兼容性

vue.config.js 配置：

添加 Node.js polyfills 的 fallback 配置
使用 ProvidePlugin 提供 Buffer 和 process 全局变量
在 chainWebpack 中修复 url-loader 配置问题，使用 webpack 5 的 asset 模块替代
添加警告忽略配置

4. 构建验证

删除旧的 node_modules 和 package-lock.json
重新安装依赖（跳过 puppeteer 的 Chromium 下载）
成功编译微信小程序：npm run dev:mp-weixin ✅

现在项目已经完全兼容 webpack 5，不会再出现 Object.assign 的错误。构建过程顺利完成，可以正常开发微信小程序了！

安装过程中遇到了 puppeteer 下载 Chromium 的网络问题。让我们跳过 puppeteer 的下载，然后重新安装： PUPPETEER_SKIP_DOWNLOAD=true npm install

请问当前 hdApp 项目，什么地方有用到 cache-loader。由于它没有最新版本支持 webpack 5，能不能把它删除了

好的，我来处理 hdApp 项目中 cache-loader 的问题。

cache-loader 通常用于 vue.config.js 文件中，以缓存某些 loader 的结果，从而提高构建速度。由于它与 webpack 5 不兼容，确实应该考虑移除。

我将首先在 hdApp 项目中查找 cache-loader 的使用位置。 Ran tool

grep 搜索结果显示，cache-loader 被列在了 hdApp/package.json 中，但是没有在任何配置文件中找到它的使用记录。

这通常意味着这个依赖虽然被安装了，但可能并没有在项目的 Webpack 配置中实际使用。为了确认这一点，我将检查 hdApp 目录下是否存在 vue.config.js 文件。 Ran tool

好的，看来 vue.config.js 的搜索被中断了。不过，根据第一次 grep 的结果，并没有在任何配置文件中找到 cache-loader 的使用痕跡。这强烈暗示它只是一个历史遗留的开发依赖，并未在实际构建流程中被使用。

因此，我们可以直接从 package.json 中移除它。

我将为您修改 hdApp/package.json 文件，删除 cache-loader 这一行。

我已经准备好移除 hdApp/package.json 文件中第38行的 "cache-loader": "^4.1.0",。请确认。

npm安装教程.md 6.8 KB Permalink History Raw