vue.config.js 配置：优化你的Vue项目

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

引言

vue.config.js 是一个可选的配置文件，如果项目根目录中存在这个文件，它会被 @vue/cli-service 自动加载。这个文件允许你对Vue CLI项目进行一些自定义配置，比如修改webpack配置、设置代理、配置别名等。

基本结构

vue.config.js 文件应该导出一个JavaScript对象，下面是一些常见的配置选项：

module.exports = {
  
  // 基本路径
  publicPath: '/',

  // 输出文件目录
  outputDir: 'dist',

  // 静态资源目录 (相对于 outputDir)
  assetsDir: 'assets',

  // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
  lintOnSave: process.env.NODE_ENV !== 'production',
  
  // webpack配置
  configureWebpack: {
    // ...自定义 webpack 配置
  },

  // 或者使用链式操作 (高级)
  chainWebpack: config => {
    // ...自定义 webpack 配置
  },

  // 开发服务器配置
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {'^/api' : ''}
      }
    },
    port: 8080,
    // ...其他开发服务器配置
  },

  // CSS相关配置
  css: {
    extract: true,
    // ...其他CSS配置
  },

  // 第三方插件配置
  pluginOptions: {
    // ...插件配置
  }
};

常见配置项解释

• publicPath：部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致。
• outputDir：构建文件的输出目录。
• assetsDir：放置生成的静态资源 (js、css、img、fonts) 的目录。
• lintOnSave：是否在保存时使用 eslint-loader 进行检查。
• configureWebpack：一个对象，会通过 webpack-merge 合并到最终的 webpack 配置中。
• chainWebpack：一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例，允许对内部的 webpack 配置进行更细粒度的修改。
• devServer：开发服务器配置，包括代理、端口等。
• css：CSS 相关的配置。
• pluginOptions：第三方插件配置。

结论

vue.config.js 文件为Vue CLI项目提供了一个灵活的配置接口，允许开发者根据项目需求调整构建过程和开发环境。通过合理配置，可以优化开发体验和构建性能，以及适配不同的部署环境。