jeecg-boot前端部署笔记

1. 打包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. (/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. (/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 [email protected] --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