在VUE2项目中vue.config.js文件夹的作用，以及各项配置的作用

1. vue.config.js 的作用

• 自定义Webpack配置：Vue CLI 内部使用了 Webpack，通过 vue.config.js 可以扩展或修改默认的 Webpack 配置。

• 调整开发服务器：配置开发服务器的代理、端口、HTTPS 等。

• 优化构建输出：配置构建输出的目录、文件名、公共路径等。

• 集成插件：添加或修改 Vue CLI 插件的行为。

2.vue.config.js 常见配置项及作用

以下是一些常见的配置项及其作用：

2.1 publicPath

• 作用：部署应用时的基本 URL。

• 示例：

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

• 说明：

  • 开发环境下通常为 /。

  • 生产环境下可以根据部署路径设置为子路径（如 /app/）。

2.2 outputDir

• 作用：指定构建输出的目录。

• 示例：

  module.exports = {
    outputDir: 'dist'
  };

• 说明：默认值为 dist，可以根据需要修改。

2.3 assetsDir

• 作用：指定静态资源（如图片、字体等）的存放目录。

• 示例：

  module.exports = {
    assetsDir: 'static'
  };

• 说明：默认值为空，表示静态资源直接放在 outputDir 下。

2.4 devServer

• 作用：配置开发服务器。

• 示例：

  module.exports = {
    devServer: {
      port: 8080, // 端口号
      proxy: {
        '/api': {
          target: 'http://localhost:3000', // 代理目标
          changeOrigin: true,
          pathRewrite: { '^/api': '' }
        }
      }
    }
  };

• 说明：

  • port：设置开发服务器的端口号。

  • proxy：配置 API 代理，解决跨域问题。

2.5 configureWebpack

• 作用：扩展或修改 Webpack 配置。

• 示例：

  module.exports = {
    configureWebpack: {
      plugins: [
        new MyPlugin() // 自定义插件
      ]
    }
  };

• 说明：可以通过对象或函数的形式修改 Webpack 配置。

2.6 chainWebpack

• 作用：通过链式操作修改 Webpack 配置。

• 示例：

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

• 说明：适合需要对 Webpack 配置进行细粒度控制的场景。

2.7 lintOnSave

• 作用：是否在保存时启用 ESLint 检查。

• 示例：

  module.exports = {
    lintOnSave: process.env.NODE_ENV !== 'production'
  };

• 说明：

  • true：每次保存时都进行 ESLint 检查。

  • false：禁用 ESLint 检查。

  • 'error'：仅将错误显示为警告。

2.8 productionSourceMap

• 作用：是否生成生产环境的 Source Map。

• 示例：

  module.exports = {
    productionSourceMap: false
  };

• 说明：

  • true：生成 Source Map，方便调试生产环境的代码。

  • false：不生成 Source Map，减少构建文件体积。

2.9 css

• 作用：配置 CSS 相关选项。

• 示例：

  module.exports = {
    css: {
      extract: true, // 是否将 CSS 提取为单独的文件
      loaderOptions: {
        sass: {
          additionalData: `@import "@/styles/variables.scss";` // 全局注入 SCSS 变量
        }
      }
    }
  };

• 说明：

  • extract：是否将 CSS 提取为单独的文件（生产环境下默认 true）。

  • loaderOptions：向 CSS 预处理器传递选项。

3. 完整示例

以下是一个完整的 vue.config.js 示例：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/app/' : '/',
  outputDir: 'dist',
  assetsDir: 'static',
  devServer: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  },
  configureWebpack: {
    plugins: [
      // 自定义插件
    ]
  },
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        return options;
      });
  },
  lintOnSave: process.env.NODE_ENV !== 'production',
  productionSourceMap: false,
  css: {
    extract: true,
    loaderOptions: {
      sass: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
};