vite 项目部署在 /app/pdf-resources 路径

在 Vite 项目中，如果你希望将项目部署在 /app/pdf-resources 路径下，并且希望本地和远程环境都使用相对路径，可以按照以下步骤进行配置：

1. vite.config.ts 配置

在 vite.config.ts 中，你可以通过 base 配置项来设置基础路径。为了确保本地和远程环境都使用相对路径，你可以将 base 设置为 ./。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'; // 如果你使用的是 Vue

export default defineConfig({
  base: './', // 使用相对路径
  plugins: [vue()], // 如果你使用的是 Vue
  // 其他配置...
});

2. 请求 public 资源（如 data.json）

在 Vite 中，public 目录下的文件会被直接复制到输出目录的根目录下。你可以直接通过相对路径来访问这些资源。

假设你的 data.json 文件放在 public 目录下，你可以这样请求：

fetch('./data.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error fetching data:', error));

3. 使用 public 目录下的 images

同样地，public 目录下的图片也可以通过相对路径来引用。假设你有一张图片 logo.png 放在 public/images 目录下，你可以在 HTML 或 JavaScript 中这样引用：

在 HTML 中引用图片

<img src="./images/logo.png" alt="Logo">

在 JavaScript 或 Vue 组件中引用图片

const imageUrl = './images/logo.png';

// 在 Vue 模板中使用
<template>
  <img :src="imageUrl" alt="Logo">
</template>

总结

1. vite.config.ts 配置：设置 base: './' 来使用相对路径。
2. 请求 public 资源：使用相对路径 ./data.json 来请求 public 目录下的资源。
3. 使用 public 目录下的 images：使用相对路径 ./images/logo.png 来引用图片。

这样配置后，无论是在本地开发环境还是远程生产环境，路径都会保持一致，无需额外的判断逻辑。