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提供了豐富的配置選項和模式，可以讓我們在不同的環境下實現快速開發和優化，同時也可以通過添加自定義模式來滿足不同的需求。在實際開發中，我們可以根據項目的特點和需求選擇不同的模式和配置。