vuejs / vitepress

Vite & Vue powered static site generator.
https://vitepress.dev
MIT License
13.32k stars 2.15k forks source link

设置带域名的base后,编译后img地址错误 #3598

Closed whwnow closed 9 months ago

whwnow commented 9 months ago

Describe the bug

设置带域名的base后,编译后img地址错误

Reproduction

当我设置了base 是一个 oss的域名后,config 配置如下: base: 'https:/xxx.oss-rg-china-mainland.aliyuncs.com/',

index.md 中使用 public 目录中的logo.png,部分index.md 如下:

# https://vitepress.dev/reference/default-theme-home-page
layout: home

hero:
  name: xxx
  text: xxx
  tagline: xxx
  actions:
    - theme: brand
      text: 联系我们
      link: /contact-us
  image:
    src: /logo.png
    alt: xxx

但执行 build 后的 dist 目录中,src 的路径中是 https:/xxx 少了一个 /,关键代码如下

<img class="VPImage image-src" src="https:/xxx.oss-rg-china-mainland.aliyuncs.com/logo.png" alt="xxx" data-v-1496cb03>

Expected behavior

应该是https://

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700K
    Memory: 16.70 GB / 31.80 GB
  Binaries:
    Node: 18.19.0 - ~\AppData\Local\pnpm\node.EXE
    npm: 10.2.3 - ~\AppData\Local\pnpm\npm.CMD
    pnpm: 8.14.1 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (121.0.2277.128)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    vitepress: latest => 1.0.0-rc.42

Additional context

No response

Validations

awxiaoxian2020 commented 9 months ago

使用英文描述问题可能能更快地得到反馈 :)

brc-dd commented 9 months ago

You don’t need to set base for this. It’s still root, you can deploy the default base output and it will work fine. base is only needed for deploying to subpath (like if you want to deploy to foo.com/bar/, then you need to set /bar/ as base)

whwnow commented 9 months ago

You don’t need to set base for this. It’s still root, you can deploy the default base output and it will work fine. base is only needed for deploying to subpath (like if you want to deploy to foo.com/bar/, then you need to set /bar/ as base)

In my usage scenario, the URL address for page access is https://a.com/, and I want the URL address for static resources to be https://oss.com/. They are not the same as the page address.

brc-dd commented 9 months ago

Static resourced in generated html/css/js are relative to your domain - https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#absolute_urls_vs._relative_urls (refer implicit domain name)

If you don't specify any base manually, then the resultant html will be something like this:

<img class="VPImage image-src" src="/logo.png" alt="..." data-v-...>

If you deploy your site to https://xxx.oss-rg-china-mainland.aliyuncs.com then the browser will automatically resolve it to https://xxx.oss-rg-china-mainland.aliyuncs.com/logo.png

whwnow commented 9 months ago

The domain name of my website and the domain name of static resources are different. To accelerate the delivery of static resources, the static resources are served from a other domain provided by a CDN service provider (Aliyun).

brc-dd commented 9 months ago

That is not supported yet. Track #2467

whwnow commented 9 months ago

That is not supported yet. Track #2467

Get it,Thank you very much for the prompt reply.