Vite 安装与配置-JavaScript中文网-JavaScript教程资源分享门户

在开始使用 Vite 之前，你需要确保你的电脑上安装了 Node.js 和 npm。Vite 是基于 Node.js 构建的，所以需要 Node.js 环境来运行。

检查 Node.js 和 npm 的版本

首先，打开终端或命令提示符，并输入以下命令检查 Node.js 和 npm 是否已经安装：

node -v
npm -v

如果这两个命令返回了版本号，说明你已经安装了 Node.js 和 npm。如果没有，请访问 Node.js 官网下载并安装最新版本。

创建一个新的 Vite 项目

Vite 提供了一个命令行工具来帮助我们快速创建项目。以下是创建项目的步骤：

打开终端或命令提示符。
使用 npm init vite@latest 命令来创建一个新项目。这个命令会引导你完成项目的初始化过程。
输入项目名称，例如 my-vite-project。
选择项目框架，如 React、Vue 或者 Vanilla。这里以 Vue 为例。
进入项目目录：
```
cd my-vite-project
```
安装项目依赖：
```
npm install
```

启动开发服务器

现在，你可以启动开发服务器来查看项目效果了。在项目根目录下执行以下命令：

npm run dev

这将启动一个本地开发服务器，默认情况下，它会在 http://localhost:3000 上运行。你可以在浏览器中打开这个地址来查看项目效果。

配置 Vite

Vite 的配置文件默认为 vite.config.js，位于项目的根目录下。这个文件允许你自定义 Vite 的行为。以下是一些常见的配置项：

base: 设置应用的基础路径。这对于部署到子路径的情况非常有用。
```
export default defineConfig({
  base: '/my-sub-path/',
});
```
server: 配置开发服务器的行为。例如，你可以更改监听的端口或者启用 HTTPS。
```
export default defineConfig({
  server: {
    port: 8080,
    https: true,
  },
});
```
build: 配置构建输出的设置。例如，你可以指定输出目录或者压缩代码。
```
export default defineConfig({
  build: {
    outDir: 'dist',
    minify: true,
  },
});
```

plugins: 添加插件来扩展 Vite 的功能。Vite 支持多种插件，可以用来处理 CSS、图片资源等。

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

export default defineConfig({
  plugins: [vue()],
});

修改 Vite 配置

根据项目需求，你可能需要对 Vite 的配置进行调整。例如，如果你希望项目在不同的环境中表现不同，可以通过环境变量来实现这一点。Vite 允许你在配置文件中使用条件语句来动态改变配置。

-- -------------------- ---- -------
------ - ------------- ------- - ---- -------

------ ------- -- ---- -- -- -
  ----- --- - ------------- -------------- ----

  ------ --------------
    ----- ---------------------- -- ----
    ------- -
      ----- ----------------- -- ------------
    --
  ---
--

在这个例子中，我们使用了 loadEnv 方法来加载环境变量，并根据这些变量动态地改变基础路径和主机名。

总结

通过以上步骤，你应该已经成功地安装和配置了一个 Vite 项目，并且了解了如何根据需求进一步调整 Vite 的配置。接下来，你可以开始探索 Vite 更多的功能，比如热更新、静态资源处理等。希望这些信息对你有所帮助！