Vue-cli-service build --mode详解

一、模式概述

Vue-cli-service是一个基于webpack的项目脚手架，用于快速搭建Vue项目。在Vue-cli-service的build命令中，我们可以通过指定mode参数来定义不同的模式，它可以帮助我们在不同的环境下对项目进行优化或调试。

Vue-cli-service默认提供了三种模式：development、production和test，开发者还可以根据自己的需要添加新的模式。

二、三种默认模式

1. development模式

在development模式下，Vue-cli-service会对代码进行热重载、创建source map、输出未压缩的代码等操作，以便我们进行调试和开发工作。该模式的配置文件为webpack.dev.conf.js。

2. production模式

在production模式下，Vue-cli-service会对项目进行打包压缩、代码分割、提取公共模块等操作，以便我们在生产环境中运行项目。该模式的配置文件为webpack.prod.conf.js。

3. test模式

在test模式下，Vue-cli-service会对项目进行测试并生成测试覆盖报告。该模式的配置文件为webpack.prod.conf.js。

三、添加自定义模式

除了默认提供的三种模式之外，我们也可以通过添加自定义模式来为项目提供不同的构建方式。

module.exports = {
  configureWebpack: {
    mode: 'custom'
  }
}

在上面的代码中，我们在configureWebpack选项中添加了mode属性，并将其设置为'custom'。之后在build命令中我们可以通过--mode选项来指定自定义模式。

四、模式配置

除了mode参数外，我们还可以通过配置不同的选项对模式进行进一步的优化和调整。

1. development模式配置

在开发模式下，我们通常会需要设置source map、关闭Host check等选项。下面是一个示例：

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  },
  devServer: {
    disableHostCheck: true
  }
}

2. production模式配置

在生产模式下，我们通常会需要设置打包优化、CDN等选项。下面是一个示例：

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
        minSize: 30000,
        minChunks: 1,
        maxAsyncRequests: 5,
        maxInitialRequests: 3,
        name: true,
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name(module) {
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
              return `npm.${packageName.replace('@', '')}`
            }
          }
        }
      }
    }
  },
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].cdn = {
        css: [
          'https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.min.css'
        ],
        js: [
          'https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.runtime.min.js',
          'https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.min.js'
        ]
      }
      return args
    })
  }
}

3. test模式配置

在测试模式下，我们通常会需要设置测试框架、覆盖率等选项。下面是一个示例：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.js$/,
          use: ['babel-loader', 'istanbul-instrumenter-loader'],
          include: [path.resolve('src')],
          exclude: [/node_modules/, /tests/]
        }
      ]
    }
  }
}

五、运行build命令及参数说明

在运行build命令时，我们需要使用Vue-cli-service命令并添加--mode参数来指定模式。下面是一个示例：

vue-cli-service build --mode production

在这个例子中，我们使用了production模式进行打包，生成的文件位于dist文件夹下。

除了--mode参数外，Vue-cli-service也提供了其他一些有用的参数：

• --modern：启用现代模式，生成两个版本的代码，针对新版浏览器和旧版浏览器进行优化。
• --target：指定编译的目标环境，可以是web、node、electron-renderer等。
• --report：生成构建报告，可以查看各个模块的大小、依赖关系等信息。
• --watch：开启监听模式，当源文件发生变化时自动重新构建。
• --color：开启控制台输出的颜色。

六、总结

Vue-cli-service提供了丰富的配置选项和模式，可以让我们在不同的环境下实现快速开发和优化，同时也可以通过添加自定义模式来满足不同的需求。在实际开发中，我们可以根据项目的特点和需求选择不同的模式和配置。