在 Vue 2 中，vue.config.js 是一个用于配置 Vue CLI 项目的文件。

vue.config.js 的基本结构

module.exports = {
  // 配置选项
};

主要配置选项

1. publicPath
   配置应用的基本 URL 路径。通常用于设置静态资源的加载路径。

   module.exports = {
     publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/',
   };
   

2. outputDir
   指定生产环境构建输出目录，默认为 dist。

   module.exports = {
     outputDir: 'dist/my-app',
   };
   

3. assetsDir
   指定静态资源（js、css、img、fonts）的目录，默认为 ''。

   module.exports = {
     assetsDir: 'assets',
   };
   

4. indexPath
   指定 index.html 的输出路径，默认为 index.html。

   module.exports = {
     indexPath: 'my-index.html',
   };
   

5. devServer
   配置开发环境下的服务器选项。

   module.exports = {
     devServer: {
       port: 8080,
       open: true, // 启动后自动打开浏览器
       proxy: {
         '/api': {
           target: 'http://localhost:3000',
           changeOrigin: true,
           pathRewrite: { '^/api': '' },
         },
       },
     },
   };
   

6. configureWebpack
   用于直接修改 Webpack 配置。

   module.exports = {
     configureWebpack: {
       plugins: [
         // 添加 Webpack 插件
       ],
       module: {
         rules: [
           // 自定义加载器规则
         ],
       },
     },
   };
   

7. chainWebpack
   使用 webpack-chain (opens new window) 进行更细粒度的配置。

   module.exports = {
     chainWebpack: config => {
       config.plugin('html').tap(args => {
         args[0].title = 'My App Title';
         return args;
       });
     },
   };
   

8. lintOnSave
   控制是否在保存时运行 eslint 检查。

   module.exports = {
     lintOnSave: true, // 或 false
   };
   

9. transpileDependencies
   指定需要转译的依赖包，可以是一个数组。

   module.exports = {
     transpileDependencies: ['some-package'],
   };
   

10. productionSourceMap
    控制是否为生产构建生成 source map。

    module.exports = {
      productionSourceMap: false,
    };
    

示例：vue.config.js

const path = require('path');

module.exports = {
  // 设定应用的基本 URL 路径
  publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/',

  // 指定生产环境构建输出目录
  outputDir: path.resolve(__dirname, 'dist/my-app'),

  // 指定静态资源（js、css、img、fonts）的目录
  assetsDir: 'assets',

  // 指定 index.html 的输出路径
  indexPath: 'my-index.html',

  // 设置开发环境的服务器选项
  devServer: {
    port: 8080, // 服务器端口
    open: true, // 启动后自动打开浏览器
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 目标 API 服务器
        changeOrigin: true, // 支持虚拟托管
        pathRewrite: { '^/api': '' }, // 重写路径
      },
    },
  },

  // 直接修改 Webpack 配置
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'), // 设置别名
      },
    },
    plugins: [
      // 可以添加自定义的 Webpack 插件
    ],
  },

  // 使用 webpack-chain 进行更细粒度的配置
  chainWebpack: config => {
    // 修改 HTML webpack 插件的标题
    config.plugin('html').tap(args => {
      args[0].title = 'My Vue App Title';
      return args;
    });

    // 添加加载器规则
    config.module
      .rule('svg')
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
  },

  // 控制是否在保存时运行 eslint 检查
  lintOnSave: true, // 或 false

  // 指定需要转译的依赖
  transpileDependencies: ['some-package'],

  // 控制是否为生产构建生成 source map
  productionSourceMap: false,
};

解释

1. publicPath: 设置应用的基本 URL 路径。根据环境变量的不同，设置生产环境和开发环境的路径。
2. outputDir: 指定生产环境构建输出目录为 dist/my-app。
3. assetsDir: 指定静态资源的目录为 assets。
4. indexPath: 设置输出的 index.html 文件名为 my-index.html。
5. devServer: 配置开发服务器的端口为 8080，并启用自动打开浏览器功能。设置了一个代理，将 /api 请求转发到 http://localhost:3000。
6. configureWebpack: 添加了别名配置，方便在代码中使用 @ 代表 src 目录。
7. chainWebpack: 修改了 HTML 插件的标题，并添加了一个加载器规则用于处理 SVG 文件。
8. lintOnSave: 启用保存时运行 ESLint 检查。
9. transpileDependencies: 指定 some-package 作为需要转译的依赖。
10. productionSourceMap: 禁用生产环境的 source map 生成。

使用示例

1. 开发环境: 当您运行 npm run serve 时，开发服务器将在 http://localhost:8080 启动，并且会自动打开浏览器。

2. API 请求: 当您在应用中发起 /api 请求时，它会被代理到 http://localhost:3000，比如您可以通过 Axios 发送请求：

   axios.get('/api/data')
     .then(response => {
       console.log(response.data);
     });
   

3. 构建生产环境: 当您运行 npm run build 时，应用会被构建到您指定的输出目录 dist/my-app。

！