vite.config.js配置入门详解

当我们在使用 Vite 构建工具时，可以使用其中一个配置文件 vite.config.js 进行一些基础的配置和优化，以实现更好的构建效果。

什么是 vite.config.js？

vite.config.js 是 Vite 构建工具的配置文件，它允许我们自定义一些构建规则、插件和优化策略等。在默认情况下，Vite 会自动查找当前工程所在目录下的 vite.config.js 文件，并基于它进行构建配置。

vite.config.js 的配置项

在 vite.config.js 中，我们会定义许多配置项来实现不同的优化或特性，下面是其中一些基础的配置项：

base

• Type: string
• Default: /

此选项定义了构建后资源所在的基础路径，即打包后的资源在静态服务器上的 URL 前缀，例如在 GitHub Pages 上部署时需要设置为 /Repository-Name/ 才可以使用相对路径部署。

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

root

• Type: string
• Default: process.cwd()

此选项指定应该从哪个文件夹中读取文件，在默认情况下，Vite 会以当前工程路径作为根目录，除非你要更改路径或为特定目录指定不同的根路径。

module.exports = {
  root: '/path/to/project/'
}

build

• Type: Object
• Default: {}

这个选项包含许多构建相关的配置项，让我们可以针对不同的环境做出不同的优化调整。

module.exports = {
  build: {
    rollupOptions: {
      input: './src/main.js'
    }
  }
}

示例

我们可以通过下面两个示例理解 vite.config.js 的应用。

示例一：修改输出目录

module.exports = {
  build: {
    outDir: 'dist'
  }
}

在上面的配置中，我们指定了输出文件夹的名称 dist，这意味着 Vite 会生成所有构建后的文件并将它们放置在 dist 文件夹中。

示例二：添加 postcss 插件

const postcss = require('postcss')

module.exports = {
  plugins: [
    {
      name: 'postcss-plugin-example',
      async transform(code, id) {
        const { css } = await postcss().process(code, { from: id })
        return { code: css, map: null }
      }
    }
  ]
}

在这个示例中，我们使用了一个名为 postcss-plugin-example 的 postcss 插件，来将 CSS 全局添加一个前缀。使用 plugins 配置项我们可以选择在开发模式或是构建模式时加载不同的插件和插件选项。