When Built with configure assetFileNames, the assets not found

[kooriookami]

Describe the bug

When project built, run the dist. The page will load all assets in css dictionary, actually the assets aren't in this dictionary.

build: {
  outDir: "test_dir",
  assetsDir: "static",
  rollupOptions: {
    output: {
      chunkFileNames: "static/js/[name]-[hash].js",
      assetFileNames(chunkInfo) {
        const fileName = chunkInfo.name;
        let extPath = "[ext]";
        if (/\.(png|jpe?g|gif|svg)$/i.test(fileName)) {
          extPath = "img";
        } else if (/\.(mp4|webm|ogg|mp3|wav|flac|aac)$/i.test(fileName)) {
          extPath = "media";
        } else if (/\.(woff2?|eot|ttf|otf)$/i.test(fileName)) {
          extPath = "fonts";
        }
        return `static/${extPath}/[name]-[hash][extname]`;
      },
    },
  },
},

Reproduction

No response

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 3.63 GB / 15.88 GB
  Binaries:
    Node: 14.17.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1023.0), Chromium (92.0.902.62)
  npmPackages:
    vite: ^2.5.0-beta.0 => 2.5.0-beta.0

Used Package Manager

npm

Logs

no error

Validations

• Follow our Code of Conduct
• 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.
• 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 provided reproduction is a minimal reproducible example of the bug.

[github-actions]

Hello @kooriookami. Please provide a minimal reproduction using a GitHub repository or codesandbox. Issues marked with need reproduction will be closed if they have no activity within 3 days.

[kooriookami]

@sodatea Here it is. https://github.com/kooriookami/vite-assets-error

npm run dev, it's no problem.

npm run build
npm run serve, missing the fonts and background image.

[dejour]

you need to set base to default value "/" or don't set base. related logic

vite/packages/vite/src/node/plugins/css.ts

Line 352 in 0209086

css = css.replace(assetUrlRE, (_, fileHash, postfix = '') => {

[ygj6]

Of course, you can set other values as well, but ./ is not a correct value in a production environment.

https://vitejs.dev/config/#base:

[kooriookami]

Of course, you can set other values as well, but ./ is not a correct value in a production environment.

https://vitejs.dev/config/#base:

Thx, but in some case, I dunno the absolute url, so I have to set a ./. Will this logic be modified later?

[ygj6]

Then you can consider not setting the base, in most cases it is applicable.

[hicc1995]

I have the same problem

[sapphi-red]

I was able to reproduce with Vite 2.9.9.
But after upgrading to Vite 3.0.0-alpha.0, it worked. Maybe #7644 (comment) fixed this.
Closing as it is fixed.

[patak-dev]

#7644 was released in 3.0.0-alpha.1, so it should be another PR. But great this is solved anyway :)

[sapphi-red]

I was lying 🤦‍♂️. It was 3.0.0-alpha.1. (I was using ^3.0.0-alpha.0 instead of 3.0.0-alpha.0.)