[development] vite config `base` option when set `/path-name/` is not work correctly for url `//path/to/static/assert/file.js` in html

genffy commented 3 years ago

⚠️ IMPORTANT ⚠️ Please check the following list before proceeding. If you ignore this issue template, your issue will be directly closed.

[x] Read the docs.
[x] Use Vite >=2.0. (1.x is no longer supported)
[ ] If the issue is related to 1.x -> 2.0 upgrade, read the Migration Guide first.

Describe the bug

create demo

npm init @vitejs/app vite-demo
cd vite-demo
npm run install

change file content

change file vite.config.ts content to :

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // base: '/path-name/', // not work
  base: './', // work
})

change file index.html content to :

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
    <!-- this line will translate to -->
    <!-- <script src="/path-name//cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.cjs.js" crossorigin="anonymous"></script> -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.cjs.js" crossorigin="anonymous"></script>
  </body>
</html>

result

Just npm run dev and then open link http://localhost:3000/path-name/ will see 404 error in browser.

But run run build work correct

Reproduction

see above

System Info

vite version: 2.0.1
Operating System: macOs Big Sur 11.2
Node version: v14.15.5
Package manager (npm/yarn/pnpm) and version: npm@6.14.11

CHOYSEN commented 3 years ago

Can not reproduce. Can you provide a repro link that can reproduce this issue?

taka1156 commented 3 years ago

import path from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  base: process.env.NODE_ENV === 'production' ? '/repo-name/' : './',
  build: {
    outDir: 'docs'
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '/src')
    }
  },
  plugins: [vue()]
});

I'm using vue-ruter-next

success :

https://user-name.github.io/repo-name/,
https://user-name.github.io/repo-name/about

wrong:

https://user-name.github.io/
https://user-name.github.io/about

example

jonaskuske commented 3 years ago

Are you passing the correct base option in your call to createWebHistory? https://next.router.vuejs.org/api/#createwebhistory

(should be import.meta.env.BASE_URL)

genffy commented 3 years ago

Can not reproduce. Can you provide a repro link that can reproduce this issue?

Add some details for issue.

vitejs / vite