Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Base path not prepended for static assets in public directory #10601

Closed
7 tasks done
J-Carder opened this issue Oct 23, 2022 · 1 comment
Closed
7 tasks done

Base path not prepended for static assets in public directory #10601

J-Carder opened this issue Oct 23, 2022 · 1 comment

Comments

@J-Carder
Copy link

J-Carder commented Oct 23, 2022

Describe the bug

I am trying to set a base path for my Vite app (I need this when deploying to GitLab Pages as it is of the form: https://<username>.gitlab.io/<projectname>. if I omit the base path it expects everything to be at https://<username>.gitlab.io, which doesn't work). When I set the base path everything works except static assets stored in /public. They omit the base path set. For example, what should be: /<basepath>/vite.svg is just /vite.svg when built and run in preview with npm run build && npm run preview.

My vite.config.ts looks like this:

import { build, defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  base: "/vite-ts-test/"
})

vite error 3

Reproduction

https://stackblitz.com/edit/vitejs-vite-ewfdb6?file=vite.config.js

Steps to reproduce

Run npm run build && npm run preview .
Append the base path to the url in the preview window. Ex. https://vitejs-vite-<id>.local.webcontainer.io -> https://vitejs-vite-<id>.local.webcontainer.io/<baseURL>

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (4) x64 Intel(R) Core(TM) i7-7600U CPU @ 2.80GHz
    Memory: 1.87 GB / 7.84 GB
  Binaries:
    Node: 16.18.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (106.0.1370.52)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @vitejs/plugin-react: ^2.1.0 => 2.1.0
    vite: ^3.1.0 => 3.1.8

Used Package Manager

npm

Logs

No response

Validations

@J-Carder
Copy link
Author

Duplicate of #7358.
Solution is to import manually like so:

import viteImg from "/vite.svg"

function App() {
  return (
      <img src={viteImg} className="App-Logo" alt="Logo">
  )
}

...instead of...

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

@github-actions github-actions bot locked and limited conversation to collaborators Nov 7, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

1 participant