vite base full url option seems not work in development #3107

lovetingyuan · 2021-04-23T08:01:20Z

Describe the bug

vite base full url option seems not work in development

export default defineConfig({
  base: 'http://localhost:3000/test/',
  plugins: [vue({
    template: {
      transformAssetUrls: {
        base: 'http://localhost:3000/test/',
      }
    }
  })]
})

Reproduction

https://github.com/lovetingyuan/vite-base-full-url

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 342.65 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.15.4 - ~/.nvm/versions/node/v14.15.4/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.10 - ~/.nvm/versions/node/v14.15.4/bin/npm
  Browsers:
    Chrome: 90.0.4430.85
    Edge: 90.0.818.42
    Firefox: 82.0.2
    Safari: 14.0
  npmPackages:
    @vitejs/plugin-vue: ^1.2.1 => 1.2.1 
    vite: ^2.1.5 => 2.2.1

Used package manager:
yarn

Before submitting the issue, please make sure you do the following

Read the Contributing Guidelines.
Read the docs.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Provide a description in this issue that describes the bug.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

The text was updated successfully, but these errors were encountered:

joeldenning · 2021-05-13T16:48:11Z

I also have encountered this, and investigated the cause. It seems related to the following code:

vite/packages/vite/src/node/config.ts

Lines 567 to 572 in d36e10e

    
           if (isExternalUrl(base)) { 
        
             if (!isBuild) { 
        
               // get base from full url during dev 
        
               const parsed = parseUrl(base) 
        
               base = parsed.pathname || '/' 
        
             }

Notice how in the above code, the base is converted to only its path name during the serve target. The path (without the host/origin part of the base) is then used in the code below when creating the vue sfc compiler's assetUrlOptions.

vite/packages/plugin-vue/src/template.ts

Lines 118 to 122 in 0423608

    
           assetUrlOptions = { 
        
             base: 
        
               options.devServer.config.base + 
        
               slash(path.relative(options.root, path.dirname(filename))) 
        
           }

I explored a possible fix by commenting out the logic in resolveBaseUrl that causes this. It got close to working, but the vite web socket connection was made to the incorrect URL. Not sure if that was the correct approach, but it seems that if the web socket logic is updated to support absolute base urls, that everything might work.

TechAkayy · 2021-07-14T13:53:02Z

This has been hitting me very badly past few days, hope this gets prioritised.. Thank you!

alfeg · 2021-11-08T18:24:44Z

Is there some sane workaround without hardcoding ulrs and string replacing?

jonaskuske · 2021-11-08T22:22:22Z

@alfeg You can try the <base> HTML element.

Add (e.g.) <base href="http://localhost:3000" /> to your HTML <head>, then something like <script src="/foo.js"> will resolve to http://localhost:3000/foo.js.

<base> can mess with quite a few other parts of your site however (you might not want all URLs with unspecified host to resolve to your base, data URIs can break, ..), so whether it solves your use case or not is a bit hit or miss.

cshawaus · 2021-11-09T00:15:05Z

This is a highly-simplified version of what I use for client projects but it accomplishes the same thing. I typically have a custom global set called BASE_URL which I use in place of import.meta.env.BASE_URL. This is not a perfect solution but it solves the issue nicely without needing to change much.

export default defineConfig(({ command }) => {
  const baseUrl = command === 'serve' ? 'http://localhost:3000/' : '';

  return {
    define: {
      BASE_URL: JSON.stringify(baseUrl),
    },
  };
});

innocenzi · 2022-02-05T14:28:24Z

I think this is fixed by #5104

alfeg · 2022-02-05T20:01:16Z

@innocenzi awesome!

Can confirm that at least in v2.7.12 this bug is no longer reproduced:

Added to vite.config

{
    ...
    server: {
       ...
       origin: "http://localhost:3000",
    }
    ...
}

Now all assets are loading without issues

Valian · 2022-02-11T12:23:55Z

@innocenzi @alfeg Sadly I'm not sure what's going on, but I still have a problem with this... Could you tell me what I'm doing wrong? Vite in development is proxied through the backend server, so real URL is localhost:8080. For various reasons I'm proxying only index.html, all assets should load directly from localhost:3000.

Minimal repro, fresh project

npm create vite@2.8.0
cd vite-project
vim vite.config.js  # add server.origin
npm run dev

# vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {origin: "http://localhost:8080/"}
})

Response from dev server curl localhost:3000

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module" src="/@vite/client"></script>
    <!-- ... -->
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Both /@vite/client and /src/main.ts are served without origin preprended. <base href="address"> in index.html also doesn't work, since /@vite/client is added to the very top of <head>, before <base>.

@alfeg how does it work for you?

cshawaus · 2022-02-12T04:10:21Z

@Valian The intended purpose behind origin is to change the URL behaviour for assets. Your use case appears to be proxying Vite's DevServer which you would require configuring the proxy settings along with some other settings.

I would recommend raising a separate ticket with a working example to better understand as it is not related to this issue.

lovetingyuan added the pending triage label Apr 23, 2021

nihalgonsalves added the plugin: vue label Apr 23, 2021

lovetingyuan mentioned this issue May 10, 2021

import static resource error joeldenning/vite-single-spa-example#4

Closed

joeldenning mentioned this issue Sep 20, 2021

vue logo is not displayed joeldenning/vite-single-spa-example#6

Closed

Niputi closed this as completed Feb 5, 2022

github-actions bot locked and limited conversation to collaborators Feb 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

vite base full url option seems not work in development #3107

vite base full url option seems not work in development #3107

lovetingyuan commented Apr 23, 2021

joeldenning commented May 13, 2021

TechAkayy commented Jul 14, 2021

alfeg commented Nov 8, 2021

jonaskuske commented Nov 8, 2021

cshawaus commented Nov 9, 2021 •

edited

innocenzi commented Feb 5, 2022

alfeg commented Feb 5, 2022

Valian commented Feb 11, 2022

cshawaus commented Feb 12, 2022

vite base full url option seems not work in development #3107

vite base full url option seems not work in development #3107

Comments

lovetingyuan commented Apr 23, 2021

Describe the bug

Reproduction

System Info

Before submitting the issue, please make sure you do the following

joeldenning commented May 13, 2021

TechAkayy commented Jul 14, 2021

alfeg commented Nov 8, 2021

jonaskuske commented Nov 8, 2021

cshawaus commented Nov 9, 2021 • edited

innocenzi commented Feb 5, 2022

alfeg commented Feb 5, 2022

Valian commented Feb 11, 2022

cshawaus commented Feb 12, 2022

cshawaus commented Nov 9, 2021 •

edited