typescript Vite不将基路径预先添加到公共目录中的任何内容

c3frrgcw  于 2023-02-17  发布在  TypeScript
关注(0)|答案(2)|浏览(142)

我有一个使用React和TypeScript的简单Vite项目。部署目标是GitLab pages。GitLab pages的URL如下所示:所以在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
})

(my项目名为vite-ts-test,如上所示)
除了我的静态资产根项目/public目录中的任何内容之外,所有内容都可以正常工作(基本URL都放在前面)。
例如,我将vite.svg(vite徽标)作为静态资产存储在/public中,当构建和预览(npm run build && npm run preview)时,我得到以下内容(这里有一个片段):(注:为清楚起见,对行进行了编号)
问题出在img标签src属性中的第3行,实际路径为/vite-ts-test/vite.svg时,它显示为/vite.svg。第6行正确,但这不是静态资产,也不在我项目中的/public中。
任何帮助都感激不尽,谢谢。

n3schb8v

n3schb8v1#

在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">
  )
}

...而不是...

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

xdyibdwo2#

文件路径:/
我在Vite Vue中使用这个。

<img :src="'images/somepic.jpg'" alt="">

我认为在React中应该是这样的。

<img src={'images/somepic.jpg'} alt="">

相关问题