vue3中vue.config.js配置及注释详解

下面是“Vue3中vue.config.js配置及注释详解”的完整攻略。

1. vue.config.js是什么

vue.config.js 是 Vue 项目的配置文件，位于项目根目录下，用于配置项目的一些基本信息。例如，可以在这里配置项目的端口号、代理、打包输出路径、公共路径等等，详细信息可以查看 Vue CLI 官方文档。

2. 创建vue.config.js

如果你的项目是通过 Vue CLI 创建的，则默认已经创建了 vue.config.js 文件。如果没有，则可以在根目录下手动创建。

在 vue.config.js 中，可以通过 module.exports 导出一个对象来进行配置。

module.exports = {
  // 配置项
}

3. 常用配置项详解

publicPath

publicPath 用于指定项目的公共路径，默认值为 /。

例如，我们将 publicPath 设置为 /my-app/，则在打包后的应用中，所有 URL 都会带上 /my-app/ 前缀。这在部署到非根路径的服务器时非常有用。

module.exports = {
  publicPath: '/my-app/'
}

devServer

devServer 用于配置开发服务器。

例如，我们可以将开发服务器的端口号修改为 8080：

module.exports = {
  devServer: {
    port: 8080
  }
}

outputDir

outputDir 用于配置打包输出的目录，默认值为 dist。

module.exports = {
  outputDir: 'my-dist'
}

configureWebpack

configureWebpack 用于传递一些 webpack 相关的配置。

例如，我们需要在项目中使用 Sass，则需要安装 sass-loader 和 node-sass，并在 vue.config.js 中进行如下配置：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: ['vue-style-loader', 'css-loader', 'sass-loader']
        }
      ]
    }
  }
}

chainWebpack

chainWebpack 用于允许修改内部的 webpack 配置。

例如，在项目中使用图片时，我们可以使用 file-loader 或 url-loader 来加载，但如果使用了 url-loader，则需要对图片进行压缩处理。可以通过如下方式在 vue.config.js 中对 url-loader 进行修改：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .tap(options =>
        Object.assign(options, {
          limit: 10240,
          fallback: {
            loader: 'file-loader',
            options: {
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        })
      )
  }
}

pluginOptions

pluginOptions 用于向插件传递选项。

例如，在项目中使用 Element UI 时，可以将主题色设置为蓝色。可以在 vue.config.js 中进行如下配置：

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, './src/styles/element-variables.less')
      ]
    }
  }
}

4. 完整示例说明

下面是一个完整的配置示例：

const path = require('path')

module.exports = {
  publicPath: '/my-app/',
  devServer: {
    port: 8080
  },
  outputDir: 'my-dist',
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: ['vue-style-loader', 'css-loader', 'sass-loader']
        }
      ]
    }
  },
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .tap(options =>
        Object.assign(options, {
          limit: 10240,
          fallback: {
            loader: 'file-loader',
            options: {
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        })
      )
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, './src/styles/element-variables.less')
      ]
    }
  }
}

5. 总结

以上就是“Vue3中vue.config.js配置及注释详解”的完整攻略了。通过 vue.config.js 的配置，可以灵活地调整和优化你的项目，让开发变得更加高效。