Vite的基本使用与常用配置项 ｜ 青训营

亚甲基蓝
140 阅读3分钟

在前端开发中，Vite 是一种快速、简单且易于使用的构建工具。它基于现代浏览器原生 ES 模块的特性，提供了一种新的开发体验。在使用 Vite 进行项目开发时，我们可以通过配置项来自定义构建过程和开发环境。本文将介绍一些常用的 Vite 配置项及其设置方法。

搭建 Vite 项目

可以使用 npm、yarn 或者 pnpm 进行安装，具体命令如下：

# 使用 npm
npm create vite@latest

# 使用 yarn
yarn create vite

# 使用 pnpm
pnpm create vite

安装完成后，进入项目目录并安装依赖：

cd my-project
npm install

# 使用 yarn
yarn

# 使用 pnpm
pnpm install

还可以在安装时指定依赖的项目模板

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

配置文件

Vite 使用 vite.config.js 文件作为配置文件。我们可以在该文件中设置各种配置项来满足项目的需求。如果在项目根目录下没有找到 vite.config.js 文件，Vite 会使用默认的配置项。

下面是一个简单的 vite.config.js 文件的例子：

//简洁版
import { defineConfig } from 'vite';
export default defineConfig(({command,mode})=>{
    return {
      ... //各项配置
    }
  }
);

常用配置项

root

root 配置项用于指定项目的根目录，默认为当前工作目录。可以是一个相对路径或绝对路径。

export default {
  root: './src'
}

base

base 配置项用于指定项目的基础路径，默认为 /。在生产环境中，该路径会作为项目的部署路径。可以是一个相对路径或绝对路径。

export default {
  base: '/my-app/'
}

publicDir

publicDir 配置项用于指定公共资源目录的路径，默认为 public。作为静态资源服务的文件夹。该目录中的文件在开发期间在 / 处提供，并在构建期间复制到 outDir 的根目录，并且始终按原样提供或复制而无需进行转换。该值可以是文件系统的绝对路径，也可以是相对于项目根目录的相对路径。

export default {
  publicDir: 'static'
}

build

build 配置项用于配置构建相关的选项。

  • outDir：指定构建输出目录，默认为 dist。
  • assetsDir：指定生成静态资源的存放路径，默认为 assets。
  • sourcemap：是否生成源映射文件，默认为 false。
  • minify：设置最小化混淆，设置为 false 可以禁用最小化混淆，或是用来指定使用哪种混淆器。默认为 Esbuild。
export default {
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: true,
    minify: false
  }
}

server

server 配置项用于配置开发服务器相关的选项。

  • host：指定服务器主机名，默认为 localhost。
  • port：指定服务器端口号，默认为 3000。
  • open：开发服务器启动时，自动在浏览器中打开应用程序。当该值为字符串时，它将被用作 URL 的路径名。
export default {
  server: {
    host: '0.0.0.0',
    port: 8080,
    open: true
  }
}

resolve.alias

resolve.alias 配置项用于配置模块解析时的别名。通过该配置项，可以为模块路径指定别名，使得在引用模块时可以使用自定义的简短别名，而不必使用完整的路径。

export default {
  resolve: {
    alias: {
      '@': '/src', // 将 '@' 别名指向 '/src' 目录
      'components': '/src/components' // 将 'components' 别名指向 '/src/components' 目录
    }
  }
}
avatar
文章
阅读
粉丝