使用Vite开发服务器时强制在BASE url中使用origin

问题描述 投票：0回答：1

我有一个 Vite/Vue SSR 服务器，用于在 Django 服务器后面进行模板渲染。 IE。 Django 调用 Node，获取 html，并将其发送回浏览器。我在 Vite 的开发服务器上遇到了一个问题，因为它不尊重像 

BASE
这样的完整 
https://bar.com/foo/
url（它删除了原始部分，这是 documented 行为）。然而，如果没有 origin 部分，生成的 html 和其他资源将包含浏览器视为相对于 Django 服务器的 origin 的 url，这显然不起作用。有没有办法强制 Vite 在 
BASE
url 中包含来源？

到目前为止，我已经能够通过以下方式解决此问题：

  1. 将 
    <base>
    标签添加到 
    index.html
    :
<base href="http://localhost:5173/" />

这适用于大多数请求，除了

/static/@vite/client
。为此，我还必须配置 Django 将此路径重定向到 Vite 开发服务器：

def vite_redirect(request):
    return redirect('http://localhost:5173/static/@vite/client')

urlpatterns = [
    path('static/@vite/client', vite_redirect),
    ...
]

这可行，但我确实看到 vite 客户端现在连接到 HMR 服务器两次，一次是在 

localhost:8000
源上加载时连接，然后是在 
localhost:5173
源上加载时再次连接：

[vite] connecting... client:495:8
[vite] connected. client:614:14
[vite] connecting... client:495:8
[vite] connected. client:614:14
django proxy vite
1个回答
0
投票

我通过添加 

<base>
标签来实现此功能，并特别注意将其放置在 
<head>
标签之后。否则，Vite 将其客户端脚本标签插入到 
<base>
标签之前，但 
<base>
标签仅适用于其之后的元素。在 的 MDN 文档中有明确的警告，请记住这一点：

警告：

<base>
元素必须具有 href 属性、目标 属性，或两者兼而有之。如果至少指定了这些属性之一， 
<base>
元素必须位于具有属性的其他元素之前 作为 URL 的值，例如 
<link>
的 href 属性。

为了在 Vite 的客户端脚本标签之前添加 

<base>
标签，我使用了 Vite transformIndexHtml 插件：

plugins: [
  vue(),
  {
    name: 'vite-client-script-transform',
    transformIndexHtml(html: string) {
      return html.replace(
        '<head>', 
        `<head><base href="http://localhost:5173" />`,
      )
    }
  }        
],
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.