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

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

一、功能介绍

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

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

💡 关键特性 ：所有配置最终会合并到 @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 完整示例：

javascript 复制代码

// 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 Icon
    if (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
    }
  }
};

四、配套操作建议

环境隔离：
bash 复制代码
```
# 开发环境（自动读取 .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

验证配置生效：

javascript 复制代码

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

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

五、注意事项

⚠️ 常见误区：

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

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