安装插件
npm i progress-bar-webpack-plugin chalk -d
vue.config.js中
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const chalk = require('chalk');
module.exports = {
...
configureWebpack: {
plugins:[
new ProgressBarPlugin({
format: ' build [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)',
clear: false
}),
]
}
}
遇到问题
npm run build打包的时候,出现问题
const chalk = require('chalk');
报Must use import to load ES module
, 然后改用import方式又会报cannot use import statement outside a module
问题原因
没有指定版本,默认安装了最新的chalk 5.0版本,此版本属于ES模块(版本5.0是export导出的chalk
),vue.config.js属于commonJs模块,需要require方式引入其他模块,而require引入的必须是module.exports导出的模块(exports、module.exports 和 export、export default到底是咋回事),不兼容所以报错。
解决方法
卸载重新安装版本chalk 4.0版本(版本4.0是module.exports导出的chalk
)的就可以了