stoic pelican
I use a mixpanel NPM package to enable tracking through Mixpanel, but the package's build is called mixpanel.js which doesn't get changed any way when bundled by Nuxt. And this keeps triggering ad blockers when they see something with mixpanel in the URL being requested by the app.
So are there any vite/rollup/nuxt build settings I can use to obfuscate the name of the file in the build output or change it to something else?
wanton jay
Yes you can, I use this configuration in nuxt.config.ts :
vite: {
build: {
rollupOptions: {
output: {
assetFileNames: 'public/assets/[hash][extname]',
chunkFileNames: 'public/[hash].js',
entryFileNames: 'public/[hash].js'
}
}
}
}
More info and options:
https://rollupjs.org/configuration-options/#output-assetfilenames
https://rollupjs.org/configuration-options/#output-chunkfilenames
https://rollupjs.org/configuration-options/#output-entryfilenames
stoic pelican
@wanton jay thanks that put me on the right path. I couldn't use those exact values tho, that broke the build, I think the prefix actually has to be /_nuxt/ not /public. I ended up just using the same approach the vite builder uses in its source code for asset file names:
import { join } from 'path'
import type { OutputOptions } from 'rollup'
import { withoutLeadingSlash } from 'ufo'
import { sanitizeFilePath } from 'mlly'
import { filename } from 'pathe/utils'
// Copied out from nuxt vite-builder source to correctly build output chunk/entry/asset/etc file names
const buildOutputFileName = (chunkName: string) =>
withoutLeadingSlash(
join('/_nuxt/', `${sanitizeFilePath(filename(chunkName))}.[hash].js`)
)