Vite打包后的js和css如何分开输出

Question

目前用Vite打包Vue项目后的输出目录，所有js和css都在dist的assets下面：

dist
  - assets
     index.css
     index.js
     index-legacy.js
     vendor.js
     vendor-legacy.js

想要打包成以下的形式，js和css分开存放：

dist
  - css
     index.css
  - js
     index.js
     index-legacy.js
     vendor.js
     vendor-legacy.js

自己尝试了一下rollup的配置，chunkFileNames和assetFileName并没有达到预期的效果

dist
  - css
     index.css
  - assets
     index.js
     index-legacy.js
  - js
     vendor.js
     vendor-legacy.js

Answer 1

rollupOptions: {
  output: {
    assetFileNames: assetInfo => {
      var info = assetInfo.name.split('.')
      var extType = info[info.length - 1]
      if (
        /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/i.test(assetInfo.name)
      ) {
        extType = 'media'
      } else if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(assetInfo.name)) {
        extType = 'img'
      } else if (/\.(woff2?|eot|ttf|otf)(\?.*)?$/i.test(assetInfo.name)) {
        extType = 'fonts'
      }
      return `static/${extType}/[name]-[hash][extname]`
    },
    chunkFileNames: 'static/js/[name]-[hash].js',
    entryFileNames: 'static/js/[name]-[hash].js'
  }
}

Answer 2

把这个也设置了就可以了 entryFileNames