- 打包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