jeecg-boot前端部署笔记

最新推荐文章于 2025-05-23 10:00:25 发布

转载最新推荐文章于 2025-05-23 10:00:25 发布 · 1k 阅读

文章标签：

#npm #vue #js #nodejs

npm 专栏收录该内容

1 篇文章

订阅专栏

本文总结了在使用Node.js进行项目打包时遇到的问题，包括`TypeError:Class extends value undefined is not a constructor or null`和`TypeError: Cannot read property 'tapPromise' of undefined`。解决方法涉及升级webpack到合适版本以及更新compression-webpack-plugin到6.1.1。此外，还介绍了如何配置vue.config.js以避免404错误，以及在web服务器部署时处理页面刷新404的策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

打包dist

一般来说，正式环境需要打包上传部署。使用nodejs打包，要注意版本的依赖。不能随意改变版本。

当中遇到问题。

npm  run  build

比如：


# vue-cli-service build
 
⠋  Building for production... ERROR  TypeError: Class extends value undefined is not a constructor or null
TypeError: Class extends value undefined is not a constructor or null
    at Object.<anonymous> (/root/deploy/ui/node_modules/mini-css-extract-plugin/dist/CssDependency.js:12:46)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/root/deploy/ui/node_modules/mini-css-extract-plugin/dist/index.js:12:45)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)

需要升级webpack

npm install webpack -g // 全局安装
npm install webpack --save-dev // 项目内安装
或者
npm add webpack@latest --registry=https://registry.npm.taobao.org

解决方法来源于https://blog.csdn.net/u013938484/article/details/106259913

 ERROR  TypeError: Cannot read property 'tapPromise' of undefined
TypeError: Cannot read property 'tapPromise' of undefined

需要升级compression-webpack-plugin插件，不要升级最新版本，并不是最新版本是最好。目前脚手架只能支持到6.1.1

npm install compression-webpack-plugin@6.1.1 --save-dev

解决方法来源于https://blog.csdn.net/weixin_46055169/article/details/112769534

整体dist文件夹放入部署

需在vue.config.js添加

  publicPath: process.env.NODE_ENV === 'production'? '/dist/' : './',
  assetsDir: 'static',

防止报404错误

注意如果文件路径中直接写入js文件中年，build时好像不会访问转化路径，从而导致js文件404错误。

如果无法访问的文件较少，可以把无法访问的文件放入dist同目录下

如果无法访问的文件较多，重新build

  publicPath: './',
  assetsDir: 'static',

然后把dist中所有文件复制出来部署

web服务器注意页面刷新报404

解决办法来源于https://www.cnblogs.com/goloving/p/9170508.html