代码之家 › 专栏 › 技术社区 › Álvaro

Vite构建到其相对dist文件夹

vite javascript

Álvaro · 技术社区 · 1 年前

我已经开始使用Vite,在开发中一切都很好,但在进行构建时没有显示任何内容,因为它生成到根 / 这是一个问题,因为我想将其部署到中的服务器 https://example.com/iframes/app 这样我就可以使用iframe访问这个url了。

所以我改变了 vite.confi.js 到

base: './', // This will ensure that paths are relative to the current directory
build: {
  outDir: 'dist',
  assetsDir: 'assets',
},

这适用于除上的所有资产之外的所有内容 public ,在dev上一切都很好,但在构建时,浏览器会在服务器的根级别查找它

`https://example.com/asset-on-public.svg`

而不是所需的

`https://example.com/iframes/app/asset-on-public.svg`

有什么想法吗?

2 回复 | 直到 1 年前

AKX Bryan Oakley 1 年前

As documented 这个 base URL应为 './' 如果您想要“嵌入式部署”,即Vite使用相对URL。

如果你想让Vite package, transform, etc. your assets, you need to import them (默认情况下,它们将变成URL字符串),例如:

import closeSvg from './close.svg';

function CloseButton() {
  return <img src={closeSvg} />;
}


function CloseBackgroundDiv() {
  return <div style={{backgroundImage: `url(${closeSvg})`}} />;
}

Lalit Pagare 1 年前

在vite-config文件中更改基本配置,然后尝试运行npm-run-build或yarn-run-build。

    export default defineConfig({
     plugins: [react()],
     base: "./",
    });

然后,在终端中(如果您使用的是npm)

npm run build

出现此问题的原因是未正确指定dist文件夹的基,因此请尝试更改vite配置文件中的基。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

4 月前

Alex · 在轻量级中同时解构和不解构变量

4 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

4 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

4 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

5 月前