vue2之vue.config.js最全配置教程

下面就详细讲解一下 “vue2之vue.config.js最全配置教程”的完整攻略。

简介

vue.config.js 是 Vue CLI 3.x 中一个重要的配置文件，用于对项目进行全局的配置。这个文件不存在，需要手动创建，与 package.json 文件同级。通过 vue.config.js 文件的配置，我们可以实现很多高级功能，例如 Webpack 的各项配置、跨域代理、目录别名等等。

基本配置

一个最基本的 vue.config.js 文件应该如下所示：

module.exports = {
  // options
}

其中，module.exports 将会被 @vue/cli-service 自动加载，即用于进行各种默认配置的扩展。

webpack配置

vue.config.js 中含有 configureWebpack 字段，可以用来修改 webpack 配置：

module.exports = {
  configureWebpack: {
    // 修改 webpack 配置
  }
}

例如，我们可以通过以下方式，来修改 webpack 的图片压缩等配置：

const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = {
  configureWebpack: {
    plugins: [
      // 开启gzip压缩
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i,
        threshold: 10240, //大于这个大小的文件才会进行压缩
        minRatio: 0.8,
      })
    ]
  }
}

外部引入CDN

如果我们想把一些公共的JS库引入到项目中，我们可以通过修改 vue.config.js 文件来配置：

module.exports = {
  configureWebpack: {
    externals: {
      // CDNS引入的js库
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'axios': 'axios'
    }
  }
}

这样可以提高页面效率，减少打包后文件的大小。

结语

以上是关于 vue.config.js 最全配置教程的攻略。我们可以通过对 vue.config.js 文件中的各个字段进行配置，来实现各种高级功能，以便更好地满足我们的需求。