【精选】简单配置下Vite

简言

我们来学习配置下vite.config.ts。

介绍

Vite 是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。vite在打包时已经做了优化（代码分割、异步加载优化等），因此，无需我们过多配置即可使用。

使用

Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

下载vite

下方任何一个即可：

npm create vite@latest
yarn create vite
pnpm create vite

启动

修改package.json中的scripts对象 :

{
  "scripts": {
    "dev": "vite", // 启动开发服务器，别名：`vite dev`，`vite serve`
    "build": "vite build", // 为生产环境构建产物
    "preview": "vite preview" // 本地预览生产构建产物
  }
}

然后 npm run dev 或 直接 npx vite即可。

简单的配置

vite.config.ts简单的配置如下：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://v/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/assets/css/main.scss";'
      }
    }
  }
})

上面时构建vue3+ts时自动生成的配置文件，我们在这基础上完善即可。

vite.config.ts

配置文件使用 esmodule导出一个对象,如果需要进行复杂的配置，需要使用defineConfig工具函数包裹对象。

import { defineConfig } from 'vite'

export default defineConfig({
  // ...
})

root

项目根目录（index.html 文件所在的位置）。可以是一个绝对路径，或者一个相对于该配置文件本身的相对路径。默认process.cwd()。

base

开发或生产环境服务的公共基础路径。合法的值包括以下几种：

• 绝对 URL 路径名，例如 /foo/
• 完整的 URL，例如 https:///
• 空字符串或 ./（用于嵌入形式的开发）

指定 base 配置项后，所有资源的路径都将据此配置重写。这个选项也可以通过命令行参数指定，例如 vite build --base=/my/public/path/。 如果你的项目带有上下文，需要指定一下base。

mode

在配置中指明将会把 serve 和 build 时的模式 都 覆盖掉。也可以通过命令行 --mode 选项来重写。
默认： 'development’ 用于开发，'production’ 用于构建。
例如 ： 'vue-tsc --noEmit && vite build --mode test’,(需要在根目录创建一个.env.test文件)

define

定义全局常量替换方式。其中每项在开发环境下会被定义在全局，而在构建时被静态替换。因为它是不经过任何语法分析，直接替换文本实现的，所以我们建议只对 CONSTANTS 使用 define。
例如，process.env.FOO 和 __APP_VERSION__ 就非常适合。但 process 或 global 不应使用此选项。变量相关应使用 shim 或 polyfill 代替。

• 从 2.0.0-beta.70 开始，string 值会以原始表达式形式使用，所以如果定义了一个字符串常量，它需要被显式地打引号。（例如使用 JSON.stringify）

• 为了与 esbuild 的行为保持一致，表达式必须为一个 JSON 对象（null、boolean、number、string、数组或对象），亦或是一个单独的标识符。

• 替换只会在匹配到周围不是其他字母、数字、_ 或 $ 时执行。

plugins

plugins是一个配置要使用插件的数组，vite插件是一个函数，所以使用时直接调用就行，不要用new 调用 。数组中也可以使用对象来添加一些属性，实现特定效果：

• 可以使用 enforce 修饰符来强制插件的位置: pre值表示在 Vite 核心插件之前调用该插件，post在 Vite 构建插件之后调用该插件,默认在 Vite 核心插件之后调用该插件：

// vite.config.js
import image from '@rollup/plugin-image'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    {
      ...image(),
      enforce: 'pre'
    }
  ]
})

• 默认情况下插件在开发 (serve) 和生产 (build) 模式中都会调用。如果插件在服务或构建期间按需使用，请使用 apply 属性指明它们仅在 'build’ 或 'serve’ 模式时调用：

// vite.config.js
import typescript2 from 'rollup-plugin-typescript2'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    {
      ...typescript2(),
      apply: 'build'
    }
  ]
})

publicDir

作为静态资源服务的文件夹。该目录中的文件在开发期间在 / 处提供，并在构建期间复制到 outDir 的根目录，并且始终按原样提供或复制而无需进行转换。该值可以是文件系统的绝对路径，也可以是相对于项目的根目录的相对路径。
将 publicDir 设定为 false 可以关闭此项功能。
请注意:

• 引入 public 中的资源永远应该使用根绝对路径 —— 举个例子，public/icon.png 应该在源码中被引用为 /icon.png。
• public 中的资源不应该被 JavaScript 文件引用。

resolve

模块解析时规则对象，可以在解析的时候替换指定内容，含有alias(别名)、extensions（扩展名）等属性。
例：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
export default defineConfig({
  resolve: {
    //  别名
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
    //  扩展
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
  },
})

css

处理css相关的配置，有modules、postcss、preprocessorOptions等。

import { defineConfig } from 'vite'

const postCssPxToRem = require('postcss-pxtorem')

// https://v/config/
export default defineConfig({

  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/assets/css/main.scss";'
      }
    },
    postcss: {
      plugins: [
        //  px转rem插件
        postCssPxToRem({
          // rootValue: 144,  //  （设计稿/10）1rem的大小
          propList: ['*']
        })
      ]
    }
  }
})

envDir

用于加载 .env 文件的目录。可以是一个绝对路径，也可以是相对于项目根的路径。默认root(项目根目录).Vite 使用 dotenv 从你的 环境目录 中的下列文件加载额外的环境变量:

• .env # 所有情况下都会加载
• .env.local # 所有情况下都会加载，但会被 git 忽略
• .env.[mode] # 只在指定模式下加载
• .env.[mode].local # 只在指定模式下加载，但会被 git 忽略

加载的环境变量也会通过 import.meta.env 以字符串形式暴露给客户端源码。为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。
根目录新建一个文件夹env，然后创建.env.development（开发环境）文件和.env.production（生产环境）文件。

改变envDir目录。这里我为了可以在配置文件内拿到自定义的环境变量，采用了函数形式配置vite.config.ts。

/*
 * @Date: 2022-10-27 11:31:17
 * @LastEditors: zhangsk
 * @LastEditTime: 2022-12-02 13:41:41
 * @FilePath: \basic-demo\vite.config.ts
 * @Label: Do not edit
 */
import { fileURLToPath, URL } from 'node:url'

import { defineConfig, loadEnv } from 'vite'

/** @type {import('vite').UserConfig} */
// https://v/config/
export default ({ command, mode }: any) => {
  //  env文件变量
  const env = loadEnv(mode, fileURLToPath(new URL('./env', import.meta.url)))
  //  是否是构建模式
  const isBuild = command === 'build'
  console.log(isBuild, mode);

  return defineConfig({
    plugins: [vue()],
    //  env目录
    envDir: fileURLToPath(new URL('./env', import.meta.url)),
    // 文件根目录
    base: env.VITE_BASE_SXW ? env.VITE_BASE_SXW + '/' : '/',

  })
}

package.json 文件中的dev和build启动命令。默认的mode分别是development和production,如果你想自定义env文件，在命令行后添加 --mode 自定义env文件名即可。例如：创建了一个.env.test文件，打包命令:

"test"："vue-tsc --noEmit && vite build --mode test"

server

开发服务器选项设置对象，包含属性常用的有host、port、open、proxy。

//  开发服务器
    server: {
      //  服务端口
      port: Number(env.VITE_PORT),
      //  host （不带端口）
      host: env.VITE_HOST,
      //  是否自动打开
      open: false,
      //为开发服务器配置自定义代理规则。
      proxy: {
        '/api': {
          target: 'http://localhost:4000',  //  意思是代理 http://localhost:4000
          changeOrigin: true,
          rewrite: (h) => h.replace(/^\/api/, '')
        }
      }
    }

build

项目构建选项设置对象。常用的属性有target、outDir、assetsDir、assetsInlineLimit。

 //  构建选项
    build: {
      //  输出目录，默认dist(相对于根目录)
      outDir: 'dist',
      //  指定生成静态资源的存放路径  ,,默认 assets
      assetsDir: 'assets',
      //小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项。 默认4096 (4kb)
      assetsInlineLimit: 4096,
      //设置最终构建的浏览器兼容目标。默认值是一个 Vite 特有的值——'modules'，这是指 支持原生 ES 模块、原生 ESM 动态导入 和 import.meta 的浏览器。
      //  另一个特殊值是 “esnext” —— 即假设有原生动态导入支持，并且将会转译得尽可能小,一般会搭配esbuild使用
      target: 'modules'
    },
    //  ESBuildOptions 继承自 esbuild 转换选项。
    esbuild: {
      //  最常见的用例是自定义 JSX
      jsxFactory: 'h',
      jsxFragment: 'Fragment'
    }
  })

完整配置

import { fileURLToPath, URL } from 'node:url'

import { build, defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

const postCssPxToRem = require('postcss-pxtorem')

// https://v/config/
export default ({ command, mode }: any) => {
  //  env文件变量
  const env = loadEnv(mode, fileURLToPath(new URL('./env', import.meta.url)))
  //  是否是构建模式
  const isBuild = command === 'build'
  console.log(isBuild, mode);

  return defineConfig({
    plugins: [vue()],
    resolve: {
      //  别名
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      },
      //  扩展
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "@/assets/css/main.scss";'
        }
      },
      postcss: {
        plugins: [
          //  px转rem插件
          postCssPxToRem({
            // rootValue: 144,  //  （设计稿/10）1rem的大小
            propList: ['*']
          })
        ]
      }
    },
    //  env目录
    envDir: fileURLToPath(new URL('./env', import.meta.url)),
    // 文件根目录
    base: env.VITE_BASE_SXW ? env.VITE_BASE_SXW + '/' : '/',
    //  开发服务器
    server: {
      //  服务端口
      port: Number(env.VITE_PORT),
      //  host （不带端口）
      host: env.VITE_HOST,
      //  是否自动打开
      open: false,
      //为开发服务器配置自定义代理规则。
      proxy: {
        '/api': {
          target: 'http://localhost:4000',  //  意思是代理 http://localhost:4000
          changeOrigin: true,
          rewrite: (h) => h.replace(/^\/api/, '')
        }
      }
    },

    //  构建选项
    build: {
      //  输出目录，默认dist(相对于根目录)
      outDir: 'dist',
      //  指定生成静态资源的存放路径  ,,默认 assets
      assetsDir: 'assets',
      //小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项。 默认4096 (4kb)
      assetsInlineLimit: 4096,
      //设置最终构建的浏览器兼容目标。默认值是一个 Vite 特有的值——'modules'，这是指 支持原生 ES 模块、原生 ESM 动态导入 和 import.meta 的浏览器。
      //  另一个特殊值是 “esnext” —— 即假设有原生动态导入支持，并且将会转译得尽可能小,一般会搭配esbuild使用
      target: 'modules'
    },
    //  ESBuildOptions 继承自 esbuild 转换选项。
    esbuild: {
      //  最常见的用例是自定义 JSX
      jsxFactory: 'h',
      jsxFragment: 'Fragment'
    }
  })
}

package.json scripts部分

"scripts": {
    "dev": "vite --mode development ",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },

总结

vite 的简单配置就结束了，vite内部已经做好了转换编译等工作，所以我们只需简单配置即可使用。这篇文章只介绍了常见的配置选项，如果你要了解更加详细的vite配置,请转到vite中文官网。