vue3项目打包出现error during build: Error: The service was stopped

vue3项目打包出现error during build: Error: The service was stopped 解决方案。

久远jy_naru

7961人浏览 · 2022-07-19 21:42:50

久远jy_naru · 2022-07-19 21:42:50 发布

问题背景

jeecgboot 二开过程中, vue3项目中编写了自定义页面且引入了 element-plus 依赖,开发过程中没有遇到任何问题,但是使用 yarn build 时会出现如下错误.

error during build: Error: The service was stopped

preview

阅读红色报错部分可以推测是出是 esbuild 崩溃了,起初笔者认为是 esbuild 自身出现了问题, 所以干脆进行了 esbuild 的重新安装, 但是报错依旧无法修复. 干脆删除了 node_modules ,进行环境的重新安装, 这次没有出现这个报错,而是显示

JavaScript heap out of memory.

可以说是相当的疑惑, 因为该 vue3 项目默认设定的内存大小是 4gb,按理来说足够了, 担心是本身 jeecgboot-vue3 的项目过于笨重再加上本人加入了 element-plus 等依赖才导致了项目过大内存溢出,于是本人干脆进行了扩容,将默认的内存大小修改为了 8个g… 心想这下足够了.结果倒好,确实是不再显示内存溢出了,但是 esbuild 依旧崩溃, 完全无法进行build.

因为在未引入 element-plus 之前笔者已经成功 build 并部署过项目,因此可以将问题成功定位为:

或许是 element-plus 和 vite 版本不兼容导致的问题.

通过阅读相关 github issue ,将问题成功解决.

解决方案

给出两个解决方案: 降低 vite 版本,或者修改 config.js 文件.

如果是 jeecgboot 二开项目,那么请不要尝试修改 vite 的版本(直接看第二种解决方案),因为 jeecgboot-vue3 自带的 vite 版本为 2.6.10, 降低版本可能会导致项目无法成功运行, 当然如果你是普通的 vue3 项目,完全可以直接将 vite 版本降至 2.5.10 , 这样就可以成功 build 项目了.

不需要修改 vite 的版本

将 vue3 项目中的 postcss.config.js 文件内容修改为:

var charsetRemoval = () => {
    return {
        postcssPlugin: 'internal:charset-removal',
        AtRule: {
            charset: atRule => {
                if (atRule.name === 'charset') {
                    atRule.remove()
                }
            }
        }
    }
}

module.exports = () => {
    return {
        plugins: [
            //其他postcss插件,
            charsetRemoval()
        ]
    }
}