Vue项目中的vue.config.js：从基础到高级的全面解析

最新推荐文章于 2025-05-06 10:44:28 发布
最新推荐文章于 2025-05-06 10:44:28 发布
阅读量3.6k 收藏 22
点赞数 23
分类专栏： vue 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16242613/article/details/146025965
版权

在这里插入图片描述

1. 什么是vue.config.js

vue.config.js 是Vue CLI项目的核心配置文件，用于自定义项目的各种构建配置。当使用@vue/cli创建项目时，默认不会生成该文件，需要开发者手动在项目根目录创建。

核心功能：

  • 修改Webpack配置
  • 配置开发服务器
  • 自定义项目构建过程
  • 管理静态资源路径
  • 配置CSS相关选项
  • 集成第三方插件
// 基本结构示例
module.exports = {
  // 配置项
}

2. 基础配置详解

2.1 创建配置文件

在项目根目录新建vue.config.js：

module.exports = {
  // 基础配置示例
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV !== 'production',
  productionSourceMap: false
}

2.2 常用基础配置项

1. publicPath

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

2. outputDir

module.exports = {
  outputDir: 'custom-dist'
}

3. assetsDir

module.exports = {
  assetsDir: 'assets'
}

4. devServer

module.exports = {
  devServer: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    https: true, // 启用HTTPS
    headers: {
      'X-Custom-Header': 'custom-value'
    }
  }
}

5. css配置

module.exports = {
  css: {
    extract: true, // 生产环境提取CSS
    sourceMap: false,
    loaderOptions: {
      sass: {
        additionalData: `@import "@/styles/variables.scss";`
      },
      less: {
        modifyVars: {
          'primary-color': '#1DA57A'
        }
      }
    }
  }
}

3. 高级配置技巧

3.1 Webpack链式操作

使用chainWebpack进行细粒度配置：

module.exports = {
  chainWebpack: config => {
    // 添加别名
    config.resolve.alias
      .set('@components', path.resolve(__dirname, 'src/components'))
    
    // 修改Loader配置
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.compilerOptions = {
          preserveWhitespace: false
        }
        return options
      })
    
    // 添加新Loader
    config.module
      .rule('markdown')
      .test(/\.md$/)
      .use('markdown-loader')
      .loader('markdown-loader')
      .end()
  }
}

3.2 环境变量管理

多环境配置方案：

.env                # 所有环境
.env.local          # 本地覆盖（git忽略）
.env.development    # 开发环境
.env.production     # 生产环境

// vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'development') {
      config.plugins.push(
        new MyPlugin({ debug: true })
      )
    }
  }
}

3.3 插件系统配置

配置PWA插件：

module.exports = {
  pwa: {
    name: 'My App',
    themeColor: '#4DBA87',
    workboxOptions: {
      skipWaiting: true,
      clientsClaim: true,
      exclude: [/\.map$/, /_redirects/]
    }
  }
}

自定义插件集成：

const MyPlugin = require('./my-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new MyPlugin({
        enableDebug: process.env.NODE_ENV === 'development'
      })
    ]
  }
}

4. 常见场景配置方案

场景1：多页面应用

module.exports = {
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    },
    admin: {
      entry: 'src/admin.js',
      template: 'public/admin.html',
      filename: 'admin.html'
    }
  }
}

场景2：CDN加速

module.exports = {
  configureWebpack: {
    externals: {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      axios: 'axios'
    }
  },
  chainWebpack: config => {
    config.plugin('html-index').tap(args => {
      args[0].cdn = {
        css: [],
        js: [
          'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js',
          'https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js'
        ]
      }
      return args
    })
  }
}

场景3：性能优化

module.exports = {
  productionSourceMap: false,
  configureWebpack: {
    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(.*)/
          }
        }
      }
    }
  }
}

5. 最佳实践与注意事项

最佳实践：

  1. 使用环境变量管理不同环境的配置
  2. 保持链式操作的可读性
  3. 合理拆分大型配置文件
  4. 定期检查构建性能
  5. 利用Webpack Bundle Analyzer分析包大小

常见问题：

// 解决方案示例：路径别名配置
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
        'assets': path.resolve(__dirname, 'src/assets')
      }
    }
  }
}

注意事项：

  1. 修改配置后需要重启服务
  2. 生产环境关闭source map
  3. 谨慎覆盖默认Webpack配置
  4. 保持Vue CLI和插件版本兼容性
  5. 使用vue inspect命令检查最终配置

6. 总结

vue.config.js是Vue CLI项目的核心配置文件，它允许开发者对项目的构建、开发服务器、插件等进行高度自定义设置。本文全面而深入地解析了vue.config.js的配置方法，内容涵盖从基础配置到高级技巧的各个方面。

在基础配置层面，vue.config.js提供了诸如publicPath、outputDir、assetsDir等选项，帮助开发者轻松管理项目的静态资源路径、构建输出目录以及静态资源子目录。这些配置对于项目的部署和构建至关重要，能够确保资源被正确加载和引用。

此外，vue.config.js还支持对开发服务器进行配置，如设置端口号、启动时自动打开浏览器以及配置代理等。这些功能极大地提升了开发体验，使得开发者能够更加专注于业务逻辑的实现。

在高级技巧方面，vue.config.js允许开发者通过configureWebpack或chainWebpack选项对Webpack进行深度定制。这包括新增和修改rules、plugins的新增、修改和删除等，为项目的构建过程提供了极大的灵活性和可扩展性。

同时，vue.config.js还支持多环境构建和性能优化等高级功能。通过配置不同的环境变量和构建策略，开发者可以轻松地实现项目的差异化构建和部署。而性能优化方面的配置则能够帮助开发者提升项目的加载速度和运行效率。

综上所述，vue.config.js是一个功能强大且灵活的配置文件，它能够满足开发者在项目开发过程中的各种需求。通过合理配置vue.config.js，开发者可以优化项目构建过程、调整开发体验以及提升项目的灵活性和可扩展性‌。
本文全面解析了vue.config.js的配置方法，涵盖从基础配置到高级技巧的各个方面。通过合理使用这些配置，开发者可以：

  • 实现项目深度定制
  • 优化构建过程和产物
  • 提高开发效率
  • 增强应用性能

建议在项目实践中：

  1. 根据实际需求选择配置
  2. 遵循Vue CLI的最佳实践
  3. 定期更新依赖版本
  4. 使用TypeScript增强配置类型安全

完整配置示例：

const path = require('path')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
  publicPath: process.env.VUE_APP_BASE_URL,
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,

  devServer: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  },

  css: {
    extract: true,
    sourceMap: false,
    loaderOptions: {
      sass: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  },

  chainWebpack: config => {
    config.resolve.alias
      .set('@', path.resolve(__dirname, 'src'))
    
    config.plugin('analyzer')
      .use(BundleAnalyzerPlugin)
  },

  configureWebpack: {
    plugins: [
      new MyCustomPlugin()
    ],
    optimization: {
      splitChunks: {
        chunks: 'all'
      }
    }
  },

  pluginOptions: {
    i18n: {
      locale: 'en',
      fallbackLocale: 'en',
      localeDir: 'locales',
      enableInSFC: true
    }
  }
}

通过灵活运用这些配置，开发者可以充分发挥Vue CLI的潜力，打造高效、可维护的现代Web应用。

在这里插入图片描述

Element Plus使用自定义主题报错Invalid options in vue.config.js: css.preprocessorOptions is not allowed
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
12-25 290
通过这种方式，我们不仅解决了原先的错误，还成功实现了自定义主题颜色的配置。通过修改index.scss文件中的样式，你可以自由调整 Element Plus 的配色方案，满足项目的个性化需求。希望这个分享能帮到你，如果遇到类似的问题，可以参考上面的配置方式进行调整。如果你有其他问题，欢迎留言讨论哦！
vue项目中vue.config.js中配置webpack详解
wzy_PROTEIN的博客
05-13 5449
vue-cli3以前的版本中把webpack的配置都写在config文件中，可以vue-cli3以上的版本中没有了config目录，可以将配置webpack的文件写在vue.config.js文件里面。是一个可选的配置文件，如果项目的 (和同级的) 根目录中存在这个文件，那么它会被自动加载。你也可以使用中的vue字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
解析vue.config.js文件
韩旭不会敲代码吧的博客
04-23 3606
解析vue.config.js文件
Vue.js 项目中 vue.config.js 常用配置项解析
我是 二川兄，对Web开发、GIS开发、3D模型、机器学习、面试技巧等方面都有一些涉猎~ 欢迎您加入技术交流圈！你可以在我的文章末尾找到我~
04-14 5216
Vue.js 项目中 vue.config.js 常用配置项解析
vue.config.js
03-13
vue.config.js vue-cli3配置一些基本的信息
vue.config.js详细配置
L_R_H_的博客
07-22 3197
/ 使用 DefinePlugin 插件定义环境变量。
vue.config.js 配置
热门推荐
muzidigbig的博客
04-13 4万+
vue.config.js配置项 vue-cli3 脚手架搭建完成后，项目目录中没有 vue.config.js 文件，需要手动创建 创建vue.config.js vue.config.js(相当于之前的webpack.config.js) 是一个可选的配置文件，如果项目的 (和package.json同级的) 根目录中存在这个文件，那么它会被@vue/cli-service自动加载。你也可以使用package.json中的vue字段，但是注意这种写法需要你严格遵照 JSON 的...
vue.config.js的详解
Litt_White的博客
01-19 9105
vue.config.js配置详情（超级详细）
Vue 项目中的 vue.config.js：从基础到高级的全面解析
最新发布
阿超的博客
05-06 680
在 Vue.js 项目开发中，vue.config.js 文件是项目的核心配置文件，它位于 Vue CLI 项目的根目录下，用于对项目的构建、开发服务器、插件等进行高度自定义设置。通过合理配置 vue.config.js，可以优化项目构建过程、调整开发体验、以及增加项目的灵活性。本文将详细介绍 vue.config.js 的配置项，并通过丰富的代码示例展示如何使用这些配置来优化你的 Vue 项目。通过 configureWebpack，可以对 Webpack 的配置进行自定义，例如添加插件、修改模块规则等。
vue.config.js中配置Vue的路径别名的方法
11-20
在Vue.js项目开发中，路径别名是一种便捷的机制，用于简化引用静态资源、组件或模块的路径。...记住，`vue.config.js`中的配置会直接影响到Webpack的打包过程，因此正确地设置这些别名对于优化开发体验至关重要。
vue.config.js常用配置详解
12-13
使用vue-cli3.0搭建项目比之前更简洁，没有了build和config文件夹。 vue-cli3的一些服务配置都迁移到CLI Service里面了，对于一些基础配置和一些扩展配置需要在根目录新建一个vue.config.js文件进行配置 module.exports = { // 选项... } 基本路径 baseUrl从 Vue CLI 3.3 起已弃用使用publicPath来替代。 在开发环境下，如果想把开发服务器架设在根路径，可以使用一个条件式的值 module.exports = { publicPath: process.env.NODE_ENV === 'prod
Vue的 vue.config.js 配置
m0_69497411的博客
03-26 5680
是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载。也可以使用中的vue字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
Vue.config.js 配置：全面解析与使用实例
小蜗牛的珍贵百宝箱
11-07 2988
文件位于 Vue CLI 项目的根目录下。它用于对 Vue CLI 配置进行自定义，进而修改 Webpack 配置、开发服务器设置、代理配置等。文件是 Vue 项目的配置宝库，通过它可以非常灵活地配置项目的各项功能。合理的配置不仅能够优化开发体验，还能提高构建效率和项目可维护性。掌握这些常用配置项，能够帮助你在项目开发过程中事半功倍。希望本文能帮助你更好地理解配置项，并在实际项目中灵活应用。
Vue vue.config.js 的详解与配置
Allen-Ye博客
04-09 2万+
Vue的 vue.config.js 配置 1. 为什么要配置 vue.config.js 由于 vue-cli 3 也学习了 rollup 的零配置思路，所以项目初始化后，没有了以前熟悉的 build 目录，也就没有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件。 但是有些内容需要进行相关的配置，所以我们还是要创建一个vue.config.js来进行数据修改，比如代理啥的 2.里面的配置详解 vue.
vue.config.js属性详解，附图文案例
weixin_45075981的博客
03-14 1540
Vue 2 项目中。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

北辰alk

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值