深入掌握Vue项目优化利器 – vue.config.js 配置详解(含代码示例1)

作为一名资深前端工程师,我经常会被询问如何优化Vue项目的性能和开发体验。而vue.config.js无疑是我们手中最为强大的利器之一。这个隐藏在Vue CLI中的配置文件,能够帮助我们轻松地定制项目的各种行为和能力,提升开发效率和产品质量。

那么,究竟vue.config.js有哪些强大的配置项呢?让我们一起来详细探索它的各种玄机。

基础配置项

在vue.config.js中,最基础的配置项包括:

publicPath: 设置应用程序基本URL,通常用于部署到非根路径。
outputDir: 设置输出目录,默认为 dist。
assetsDir: 设置静态资源（js、css、img、fonts）的目录,默认为 ''。
indexPath: 设置index.html的输出路径,默认为 'index.html'。
filenameHashing: 是否在文件名中包含hash值,默认为 true。

示例:

module.exports = {
  publicPath: '/my-app/',
  outputDir: 'dist',
  assetsDir: 'static',
  indexPath: 'index.html',
  filenameHashing: true
}

这些基础配置项可以帮助我们更好地管理项目的目录结构和文件命名,为部署和发布做好准备。

开发相关配置

在开发过程中,vue.config.js还提供了许多有助于提升开发体验的配置项:

devServer: 配置开发服务器的行为,例如设置代理、热更新等。
css.sourceMap: 是否为CSS开启source map,默认为开发环境下开启,生产环境下关闭。
parallel: 是否为Babel或TypeScript使用thread-loader,默认为 true。
transpileDependencies: 默认情况下babel-loader会忽略所有 node_modules 中的文件,如果你想要通过Babel显式转译一个依赖,可以在这个选项中列出来。

示例:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  css: {
    sourceMap: true
  },
  parallel: true,
  transpileDependencies: [
    'vue-awesome-swiper'
  ]
}

这些配置可以大幅优化开发体验,提高开发效率。

高级优化配置

除了基础和开发相关的配置,vue.config.js还提供了许多强大的高级优化功能:

chainWebpack: 通过链式操作修改内部的Webpack配置。
configureWebpack: 直接操作Webpack配置对象,能够覆盖默认配置。
pluginOptions: 添加第三方插件配置,如ElementUI、VueI18n等。
productionSourceMap: 是否为生产环境开启source map,默认为 true。
crossorigin: 设置生成的HTML中<link>和<script>标签的crossorigin属性。

示例:

module.exports = {
  chainWebpack: config => {
    config.optimization.splitChunks({
      chunks: 'all',
      cacheGroups: {
        libs: {
          name: 'chunk-libs',
          test: /[\\/]node_modules[\\/]/,
          priority: 10,
          chunks: 'initial'
        },
        elementUI: {
          name: 'chunk-elementUI',
          priority: 20,
          test: /[\\/]node_modules[\\/]_?element-ui(.*)/ 
        },
        commons: {
          name: 'chunk-commons',
          test: /[\\/]src[\\/]components[\\/]/,
          minChunks: 2,
          priority: 5,
          reuseExistingChunk: true
        }
      }
    })
  },
  configureWebpack: {
    externals: {
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter'
    }
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, 'src/styles/variables.less'),
        path.resolve(__dirname, 'src/styles/mixins.less')
      ]
    }
  },
  productionSourceMap: false,
  crossorigin: 'anonymous'
}