vue.config.js 文件功能介绍，使用说明，对应完整示例演示

以下是 vue.config.js 文件的详细介绍、使用指南及完整示例：

---

一、功能介绍

vue.config.js 是 Vue CLI 项目的全局配置文件，用于定制化项目构建流程。其核心作用包括：

1. 覆盖默认配置：调整 Webpack、Babel 等底层工具链的行为。
2. 定义环境变量：通过 process.env 区分开发/生产环境。
3. 扩展构建能力：添加自定义加载器、插件或优化策略。
4. 统一管理常用参数：如输出目录、索引文件名称等。

💡 关键特性：所有配置最终会合并到 @vue/cli-service 的内部规则中，优先级高于默认值。

---

二、使用说明

✅ 基础规则

• 存放位置：必须放在项目根目录（与 package.json 同级）。
• 导出格式：必须导出一个 JavaScript 对象（ES5 语法兼容）。
• 生效时机：在项目启动时自动加载，影响后续构建过程。

🛠️ 常用配置项分类

类别	典型配置	说明
基础路径	publicPath	资源加载基址（如 CDN 部署时设为 /assets/）
输出控制	outputDir, filenameHashing	修改打包后的文件夹名称/是否添加哈希戳
代理与后端联调	devServer.proxy	解决前端跨域请求问题
环境变量注入	defineProperties	向代码中注入全局常量（如 API_URL='https://api.example.com'）
样式预处理	css.loaderOptions	配置 PostCSS、Less/Sass 等预处理器选项
第三方插件集成	configureWebpack.plugins	直接操作 Webpack 插件系统（高级用法）

---

三、完整示例演示

以下是一个包含多场景配置的 vue.config.js 完整示例：

// vue.config.js
const isProduction = process.env.NODE_ENV === 'production';module.exports = {// 🌟 基础路径 & 静态资源处理publicPath: '/vue-app/', // 根据实际部署路径调整assetsDir: 'static',      // 静态资源存放目录（替代 default）// 🔄 输出文件名带哈希且无时间戳filenameHashing: true,productionSourceMap: false, // 生产环境关闭 source map// 🌐 DevServer 代理配置（解决跨域）devServer: {proxy: {'/api': {target: 'http://localhost:3000', // 目标 API 地址changeOrigin: true,             // 允许跨域pathRewrite: {'^/api' : ''}      // 重写路径（去掉 /api 前缀）}}},// 📦 环境变量注入（两种方式）defineConstants: {VERSION: JSON.stringify('1.0.0'),   // 字符串类型需序列化DEBUG: 'true'                       // 将被定义为 true},chainWebpack: config => {// 🔧 修改 Webpack 内部配置（进阶用法）config.resolve.alias.set('@', resolve(__dirname, 'src'))          // src 目录别名.set('components', resolve(__dirname, 'src/components')); // 组件库别名// 🌿 自动导入 Ant Design Iconif (isProduction) {config.plugin('ignore').use(/\.svg$/, {}); // 排除非必要文件}},// 🎨 CSS 预处理器配置css: {loaderOptions: {postcss: {plugins: [require('postcss-pxtorem')({ rootValue: 75 }), // 设计稿换算比例require('autoprefixer') // 自动补全浏览器前缀]},sass: {additionalData: `@import "@/styles/variables.scss";` // 全局 SCSS 变量}},extract: isProduction // 生产环境单独提取 CSS},// 🛑 禁用 ESLint 警告（慎用！）linting: {eslintOptions: {quiet: true}}
};

---

四、配套操作建议

1. 环境隔离：

   # 开发环境（自动读取 .env.development）
   npm run serve# 生产环境构建（读取 .env.production）
   npm run build
   

   创建 .env 文件家族：

   • .env.development → VUE_APP_BASE_URL=http://dev.api.com
   • .env.production → VUE_APP_BASE_URL=http://prod.api.com

2. 验证配置生效：

   // main.js 中测试环境变量
   console.log('当前环境：', process.env.NODE_ENV); // development/production
   console.log('API 地址：', process.env.VUE_APP_BASE_URL);
   

3. 调试技巧：

   • 修改配置后需重启开发服务器
   • 复杂配置建议查阅 Webpack 官方文档
   • 使用 vue inspect > output.js 查看最终编译配置

---

五、注意事项

⚠️ 常见误区：

1. 勿与 vue.config.[hash].js 混用：Vue CLI 不支持动态命名配置文件。
2. 谨慎修改内部 Webpack：优先使用提供的上层 API（如 chainWebpack）。
3. 平台差异：某些配置（如 publicPath）在不同部署环境下需要差异化处理。

通过合理配置 vue.config.js，可以显著提升项目灵活性并优化构建性能。建议根据实际需求逐步添加配置，避免一次性修改过多导致排查困难。