One: webpack can realize the requirements
The benefits of deleting the console in a production environment are as follows:
- appear more professional and standardized;
- Improve the loading speed of the first screen
By installing a plug-in for webpack, the packaged version can be realized without console and debugger. The console/debugger is also kept in the development environment, which not only ensures the convenience of development, but also does not affect the production version.
Two: Implementation steps
1. Install uglifyjs-webpack-plugin
npm install uglifyjs-webpack-plugin2. config.js configuration
configureWebpack:config=>{
// build时关闭console、debugger
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
config.plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_debugger: true,//关闭debug
drop_console: true,//关闭console
}
},
})
);
}Three: Problem Solving
If an error is reported, as follows:
! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] serve: vue-cli-service serve
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Admin\AppData\Roaming\npm-cache_logs\2023-02-06T14_17_03_399Z-debug.log
Delete the dependency node_modules and reinstall it
Four: Effect comparison
My blog, the production version console is clean, as follows: production version
The code is in the development environment, npm run serve, you can see various consoles and debuggers.
The source code is as follows: github address