芋道 ruoyi-vue-pro 踩的那些坑—前端编译打包问题

1、芋道 ruoyi-vue-pro 前端没有README.md，是可以理解，毕竟他们是以文档来创收的。但是对于非专业的前端人员非常的不友好。坑是一个接一个，很崩溃。

我看项目有有个yarn.lock，所以应该是用yarn编译打包的。执行

yarn  run build:prod

提示要安装webpack，于是根据提示安装了webpack。然后继续打包，于是就出现了下面的报错信息，说什么参数是undefined，查了半天也没看到tapPromise参数。

2、后面网上看到一篇博客，他是用npm 来打包的，于是我就换成npm重新打包。

于是，就开始看eslint和eslint-config-prettier等的版本对应关系。改来改去也没有解决问题。nodejs的版本也从14切到16又切到18。

3、因为在本地是用yarn run local 可以正常运行的。网上说yarn在编译管理似乎更强大，于是又用 yarn install项目试试。此时报了一个比较有用的提示信息。

error @achrinza/node-ipc@9.2.2: The engine "node" is incompatible with this module. Expected version "8 || 10 || 12 || 14 || 16 || 17". Got "18.7.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

问题是我的nodejs版本太高了，于是又将node版本降到16。然后通过对比了之前的代码，发现package.json的devDependencies下多了两个webpack相关的包。这个就是第一次打包的时候不小心安装上的，把这两个删掉，然后执行一些脚本就可以。

yarn install
yarn run build:prod

4、总结：

• 本是很简单的事情，结果花了大半天的时间。
• 对于这种开源的项目或框架，尽量不要自己去添加包组件，除非非常熟悉的情况下。
• README.md文件还是非常重要的。

5、以下是运行和打包的步骤

本地运行
yarn run local 

打包
yarn install 
yarn run build:prod