No matter how hard the road ahead, as long as the right direction, no matter how bumpy, is closer to happiness than standing in the same place.

preface

The configuration in this article is based on Vue CLI 3.0. If the version is greater than or equal to 3.0, there will be no problem. For other environment versions, please bypass 😂.

Close online source code

  • Add the following code to vue.config.js
module.exports = {
    // Close the online source code
    productionSourceMap: false,}Copy the code
  • The effect after removal

Remove the console

Using the TerserPlugin plugin

  • Install plug-in: terminal execution
yarn add terser-webpack-plugin
Copy the code
  • Add the following code to vue.config.js
module.exports = {
    configureWebpack: {optimization: {minimizer: [new TerserPlugin({ terserOptions: { compress: { drop_console: true}})]}}}Copy the code
  • More usage of the plugin: terser-webpack-plugin

Use the configuration delivered with the CLI

Thanks to your suggestion in the comments section (@xiaomaomao), the code has been tested and console can be removed

  • Add the following code to vue.config.js
// Close the production environment console
configureWebpack(config) {
    if (process.env.NODE_ENV === 'production') {
        config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true}}Copy the code

Write in the last

  • If there are any errors in this article, please correct them in the comments section. If this article helped you, please like it and follow 😊
  • This article was first published in nuggets. Reprint is prohibited without permission 💌