Vue.config.js常用配置详解

摘要：本文将介绍Vue.config.js中常用的配置选项，包括publicPath、outputDir、devServer、chainWebpack等，并提供相应的代码示例，帮助读者更好地理解和配置Vue项目。

## 1. publicPath

publicPath 选项用于配置项目的基本路径。默认情况下，Vue项目的基本路径是 / ，即根目录。你可以根据实际需求进行配置，例如将项目部署到子目录时，可以设置 publicPath 为子目录的路径。

 

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/sub-directory/' : '/'
}

在上述示例中，我们根据环境变量 NODE_ENV 的值来动态设置 publicPath 。在生产环境下，将 publicPath 设置为 /sub-directory/ ，在开发环境下，将 publicPath 设置为 / 。

## 2. outputDir

outputDir 选项用于配置打包输出的目录，默认为 dist 。你可以根据实际需求进行配置，例如将打包输出的文件放在指定目录下。

 

// vue.config.js
module.exports = {
  outputDir: 'build'
}

在上述示例中，我们将打包输出的文件放在 build 目录下。

## 3. devServer

devServer 选项用于配置开发服务器。你可以根据实际需求进行配置，例如设置代理、改变默认端口等。

 

// vue.config.js
module.exports = {
  devServer: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

在上述示例中，我们将开发服务器的端口设置为 8080 ，并配置了一个代理，将以 /api 开头的请求代理到 http://localhost:3000 。

## 4. chainWebpack

chainWebpack 选项用于通过 [webpack-chain] (https://github.com/neutrinojs/webpack-chain) 对内部的 webpack 配置进行更细粒度的修改。你可以根据实际需求进行配置，例如添加自定义的loader、插件等。

 

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('svg')
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  }
}

在上述示例中，我们通过 chainWebpack 配置，添加了一个针对 .svg 文件的 loader，并设置了 symbolId 选项。

通过本文的介绍，我们了解了Vue.config.js中常用的配置选项，并提供了相应的代码示例。希望这些示例能够帮助读者更好地理解和配置Vue项目，提高开发效率和代码质量。