Vite不对公共目录中的任何内容添加基路径。

Question

我有一个使用React和TypeScript的简单的Vite项目。部署目标是GitLab页面。GitLab页面URL是这样的：https://<username>.gitlab.io/<projectname>，所以在vite.config.ts中，我必须像这样设置base: "/<projectname>/"：

vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: "/vite-ts-test/" // <---------- base set here
})

(我的项目名为vite-ts-test，如上文所示)

一切正常工作(基本URL在所有内容之前)，除了我的根项目/public目录中用于静态资产的任何内容。

例如，我将vite.svg ( vite徽标)作为静态资产存储在/public中，当构建和预览(npm run build && npm run preview)时，我得到了以下内容(下面是一个片段)：(注意:行编号是为了清晰)

1 <div>
2     <a href="https://vitejs.dev" target="_blank">
3         <img src="/vite.svg" class="logo" alt="Vite logo">
4     </a>
5     <a href="https://reactjs.org" target="_blank">
6         <img src="/vite-ts-test/assets/react.35ef61ed.svg" class="logo react" alt="React logo">
7     </a>
8 </div>

问题是img标记src属性中的第3行，当实际路径为/vite-ts-test/vite.svg时，它表示/vite.svg。第6行是正确的，但是这不是一个静态资产，也不在我的项目的/public中。

任何帮助都很感谢，谢谢。

Answer 1

在Vite GitHub：https://github.com/vitejs/vite/issues/7358上找到一个重复的问题

基本上，您必须手动导入映像(或任何静态资产)。

import viteImg from "/vite.svg"

function App() {
  return (
      <img src={viteImg} className="App-Logo" alt="Logo">
  )
}

...instead的.

function App() {
  return (
      <img src="/vite.svg" className="App-Logo" alt="Logo">
  )
}```