实战指南：配置Vite以优化开发体验及项目结构规划

本文是《React管理平台》第三节，通过本文，你讲学到如何在 Vite 中配置 base 和 alias 选项、如何规划项目目录结构。

配置 Vite

修复静态资源路径问题

运行打包命令：

bash 复制代码

# 使用 pnpm
pnpm build

# 使用 npm
npm run build

# 使用 yarn
yarn build

打包完成后，我们会在项目根目录下看到新生成的 dist 文件夹。

如果在webstorm 编辑器中直接预览生成的 dist/index.html 文件，我们可能会遇到无法加载 JavaScript 和 CSS 文件的问题。因为引用路径错误。

打开 dist/index.html 文件在 Chrome 浏览器中预览，会注意到浏览器报错，提示无法找到编译后的 JavaScript 或 CSS 文件。

这是因为 HTML 页面中静态资源的引用路径以 / 开头。浏览器会尝试从网站根目录加载这些资源，而不是当前页面的相对路径。

为了解决这个问题，我们可能会尝试把所有以 / 开头的路径手动改为以 ./ 开头，但这种方法既繁琐又容易出错。幸运的是，我们可以在 Vite 配置中进行更改，来一劳永逸地解决这个问题。

base的作用

在 vite.config.ts 配置文件中，设置 base 选项为 './' 可以告诉 Vite 使用相对路径来引用资源：

typescript 复制代码

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  // ...其他的配置

  base: './', // 设置项目的基本公共路径为相对路径
});

更新配置并重新运行打包命令后，我们会发现所有静态资源的路径现在正确地以 ./ 开头了，包括 JavaScript、CSS，甚至图片文件。

现在无论是直接打开 dist/index.html 文件，还是在本地静态服务器上预览，所有资源都可以正确加载。这项小小的配置调整可以显著提高本地预览的便利性，同时确保部署时资源路径的正确性。

注意事项

base 属性在不同的部署场景下起到关键作用。

如果我们要将站点部署到根路径（如https://example.com）， base 应设定为 '/' 或 './' 。

若部署在子路径（如https://example.com/yyyy/），则base应调整为'/yyyy/'。

这个配置将直接影响打包文件中所有相对URL的正确性，涵盖从JavaScript、CSS到图片等各种静态资源。

这样，无论我们的项目是部署在根路径还是子路径，都可以通过适当配置base来确保静态资源的正确加载，从而避免部署环境的差异造成问题。只需少量配置，就能确保构建结果在各种环境下均能正常工作，显著提高开发效率。

alias 路径别名

路径别名可以为项目中的模块路径定义简短易记的名称，从而避免繁琐的相对路径引用。在 Vite 中配置别名 (alias)，可以让我们在引入模块时更加方便，同时在项目结构变更时仅需修改配置文件，而无需手动调整每个文件的引用路径。

下面展示如何在 vite.config.ts 文件中设置别名：

typescript 复制代码

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      // 将'@'映射到'src'目录
      '@': path.resolve(__dirname, './src')
    }
  },
  
  // 插件配置
  plugins: [react()]
})

请注意，这里使用了 path 和 __dirname ，这两者是Node.js环境提供的API。由于我们的配置文件扩展名为 .ts ，因此需要安装 @types/node 类型定义以获得类型支持。

安装 @types/node：

bash 复制代码

# 使用 pnpm
pnpm i @types/node

# 或者使用 npm
npm i @types/node

# 或者使用 yarn
yarn add @types/node

现在，我们就能在代码中自由使用@符号来代表src目录路径，例如：

规划项目的目录结构

了解完Vite配置中base和alias的重要性之后，让我们来梳理一下理想的项目目录结构。合理的目录组织可以为之后的开发工作带来便利，并确保项目的可扩展性和可维护性。以下是一个建议的目录结构，为未来的学习和项目开发准备：

bash 复制代码

src/                     # 源代码目录
|- api/                  # 存放用于API请求的函数
|- assets/               # 静态资源目录，例如图片和样式文件
|- components/           # 可复用的UI组件库
|- constants/            # 项目中用到的常量定义
|- hooks/                # 自定义的React钩子（如果我们在使用React）
|- layout/               # 构成页面布局的组件
|- pages/                # 页面级组件，一般对应路由路径
|- routes/               # 定义应用路由的配置文件
|- store/                # 全局状态管理目录，适用于Redux或MobX等库
|- styles/               # 全局样式文件，如SCSS或CSS
|- types/                # 用于TypeScript的类型定义
|- utils/                # 存放各种工具函数

总结

我们介绍了如何使用 base 配置项解决静态资源路径问题，并详细解释了在不同部署场景下如何正确设置该选项以确保资源的正确加载。为了进一步提高项目的可维护性，我们还介绍了如何设置路径别名 alias，这样可以简化模块的导入路径，尤其在项目结构发生变化时，能够便捷地通过修改配置文件而不是手动更新多个文件的引用路径。除了调整配置，我们还详述了一个高效且可维护的项目目录结构，突出了每个目录的作用和重要性。这样的结构不仅促进了模块化开发，还便于未来的扩展和团队合作。通过采纳这些建议，开发者可以避免常见问题，提高开发效率，并为项目奠定坚实的基础。