vue.config.js 详解

`vue.config.js` 是 Vue CLI 3.x 以上版本中新增的配置文件，用于配置构建工具的行为。它是一个可选的配置文件，在项目根目录下创建即可。

以下是 `vue.config.js` 中可以配置的选项：

### publicPath

- 类型：`string`
- 默认值：`'/'`

应用部署的基础路径。默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径下，例如 `https://www.example.com/`。如果你的应用被部署在一个子路径下，你需要在这里指定子路径。例如，如果你的应用被部署在 `https://www.example.com/my-app/`，那么将 `publicPath` 设置为 `'/my-app/'`。

### outputDir

- 类型：`string`
- 默认值：`'dist'`

打包生成的文件输出的目录。当运行 `npm run build` 时，生成的文件将会被放置在此目录下。

### assetsDir

- 类型：`string`
- 默认值：空字符串

静态资源文件夹的名称。该文件夹中的文件将会被复制到输出目录中，例如 `img/logo.png` 会被复制到 `dist/img/logo.png`。如果设置了 `publicPath`，则在 HTML 文件中引用静态资源时需要使用该路径。

### indexPath

- 类型：`string`
- 默认值：`'index.html'`

指定生成的 `index.html` 文件的输出路径。相对于 `outputDir`。

### filenameHashing

- 类型：`boolean`
- 默认值：`true`

是否使用文件哈希。如果设置为 `true`，则在文件名中包含哈希以实现缓存。

### lintOnSave

- 类型：`boolean | 'warning' | 'default' | 'error'`
- 默认值：`true`

是否在保存时通过 eslint-loader 在每次构建时 lint 代码。设置为 `true` 或 `'warning'` 时，保存时会输出提示信息但不会阻止编译。设置为 `'default'` 时，保存时会输出提示信息并阻止编译。设置为 `'error'` 时，保存时会输出错误信息并阻止编译。

### runtimeCompiler

- 类型：`boolean`
- 默认值：`false`

是否使用包含运行时编译器的 Vue 构建版本。设置为 `true` 可以使用 `template` 选项，但会增加应用的体积。

### transpileDependencies

- 类型：`Array<string | RegExp>`
- 默认值：`[]`

需要被 babel 编译的依赖包名称或正则表达式列表。如果使用了某些第三方库，可能需要将它们加入到这个选项中。

### productionSourceMap

- 类型：`boolean`
- 默认值：`true`

是否在生产环境中生成 source map。开启 source map 会影响构建性能，但可以方便地调试生产环境中的代码。

### crossorigin

- 类型：`string`
- 默认值：空字符串

设置生成的 HTML 文件中的 `<link>` 和 `<script>` 标签的 `crossorigin` 属性。默认情况下，没有这个属性。如果需要设置，可以使用 `'anonymous'` 或 `'use-credentials'`。

### configureWebpack

- 类型：`Object | Function`
- 默认值：空对象

修改内部的 Webpack 配置。如果值是一个对象，则它将被合并到最终的配置中。如果值是一个函数，则它会接收被解析的配置作为参数。该函数可以修改配置并返回新的配置，也可以返回一个被合并的配置对象。

### chainWebpack

- 类型：`Function`
- 默认值：空函数

允许对内部的 Webpack 配置进行更细粒度的修改。该选项接收一个函数，该函数会在内部的 Webpack 配置被解析完成后执行。可以使用 [webpack-chain](https://github.com/neutrinojs/webpack-chain) API 对配置进行修改。

### css

- 类型：`Object`
- 默认值：空对象

配置 CSS 相关选项。

#### css.modules

- 类型：`boolean`
- 默认值：`false`

是否开启 CSS modules。启用 CSS modules 后，类名将会被自动转换为哈希字符串，以避免样式冲突。

#### css.extract

- 类型：`boolean | Object`
- 默认值：`true`

是否将 CSS 提取为单独的文件。默认情况下，生产环境中会提取 CSS，开发环境中不会。如果设置为 `false`，则所有的 CSS 代码会被包含在 JavaScript 文件中。

如果设置为一个对象，则可以通过 `filename` 选项来指定提取出来的 CSS 文件名，以及 `chunkFilename` 选项来指定异步加载的 CSS 文件名。

#### css.sourceMap

- 类型：`boolean`
- 默认值：`false`

是否为 CSS 开启 source map。

#### css.loaderOptions

- 类型：`Object`

向 CSS 相关的 loader 传递选项。例如：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/variables.scss";`
      }
    }
  }
}

上述配置表示向 `sass-loader` 传递了一个名为 `data` 的选项，该选项包含了一个 SCSS 变量文件的引用。

### devServer

- 类型：`Object`
- 默认值：空对象

配置开发服务器行为。

#### devServer.port

- 类型：`number`
- 默认值：`8080`

开发服务器监听的端口号。

#### devServer.host

- 类型：`string`
- 默认值：空字符串

开发服务器监听的主机名。如果想让服务器可以被外部访问，应将该值设置为 `0.0.0.0`。

#### devServer.proxy

- 类型：`string | Object`
- 默认值：空对象

配置 devServer 的代理。可以使用字符串或对象来代理多个路径。例如：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
}

上述配置表示将所有以 `/api` 开头的请求转发到 `http://localhost:3000`。`changeOrigin` 选项表示是否改变请求头中的 `host` 值。

#### devServer.before

- 类型：`Function`

提供在服务器内部所有其他中间件之前执行自定义中间件的能力。该函数接收 app、server 和 compiler 3 个参数。例如：

module.exports = {
  devServer: {
    before(app) {
      app.get('/api/user', (req, res) => {
        res.json({ name: 'Vue.js' })
      })
    }
  }
}

上述配置表示在开发服务器启动后，访问 `/api/user` 路径时返回一个名为 `Vue.js` 的 JSON 数据。

### pluginOptions

- 类型：`Object`
- 默认值：空对象

向插件传递选项。例如：

module.exports = {
  pluginOptions: {
    foo: {
      bar: true
    }
  }
}

上述配置表示向 `foo` 插件传递了一个名为 `bar` 的选项，该选项的值为 `true`。

以上是 `vue.config.js` 中的一些常用选项，还有其他选项可以在需要时查阅官方文档，进行更详细的配置。