掌握Vue CLI 3脚手架配置（vue.config.js）

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

摘要：

本文将详细介绍Vue CLI 3的配置文件vue.config.js，探讨如何通过自定义配置优化Vue项目，提高开发效率。

引言：

Vue CLI 3是Vue.js官方提供的脚手架工具，它极大地简化了Vue项目的搭建和配置过程。其中，vue.config.js是Vue CLI 3的核心配置文件，通过它，开发者可以灵活地定制项目构建过程。本文将带你深入了解vue.config.js的配置方法和技巧。

正文：

1. Vue CLI 3与vue.config.js简介

Vue CLI 3是Vue.js社区推出的新一代脚手架工具，它提供了一套完整的项目配置和构建流程。vue.config.js是Vue CLI 3项目的配置文件，位于项目根目录下，用于自定义webpack配置和其他项目设置。

2.基本配置项

以下是一些常用的vue.config.js配置项：

• publicPath：设置部署应用时的基本URL。
• outputDir：指定构建输出目录。
• indexPath：指定indexPath文件名，默认为index.html。
• filenameHashing：文件名哈希处理，默认为true。
• lintOnSave：是否在保存时启用ESLint检查。

示例配置：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
  outputDir: 'dist',
  indexPath: 'index.html',
  filenameHashing: true,
  lintOnSave: process.env.NODE_ENV !== 'production'
};

3.自定义webpack配置

Vue CLI 3允许通过configureWebpack选项来修改webpack配置。你可以直接修改配置对象，或者返回一个函数来修改配置。
示例：

module.exports = {
  configureWebpack: {
    plugins: [
      new MyWebpackPlugin()
    ]
  }
};

4. 链式配置

Vue CLI 3还支持链式配置，通过chainWebpack选项，可以在webpack的基础上进行更细粒度的配置。
示例：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        // 修改loader选项
        return options
      })
  }
};

总结：

通过本文的介绍，我们了解了Vue CLI 3的配置文件vue.config.js的重要性和使用方法。合理配置vue.config.js能够帮助我们优化项目构建，提升开发效率，实现个性化需求。

参考资料：

• Vue CLI官方文档：https://cli.vuejs.org/zh/config/
• “Vue CLI 3深入理解” by 尤雨溪
• “Vue CLI 3配置参考” by Vue.js社区