我有一个使用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
中。
任何帮助都感激不尽,谢谢。
2条答案
按热度按时间n3schb8v1#
在Vite GitHub上发现一个重复问题:https://github.com/vitejs/vite/issues/7358
基本上,您必须手动导入图像(或任何静态资产)。
...而不是...
xdyibdwo2#
文件路径:/
我在Vite Vue中使用这个。
我认为在React中应该是这样的。