Vite + Vue 3 built project Content-Security-Policy Error (CSP) 'script-src "self"' because of new Function constructor in built files

Question

I have added CSP header 'Content-Security-Policy': "script-src 'self'", built project, then got error:

Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

which disables using eval & Function constructors. Is it possible to get rid of using Function constructor in built files?

Answer 1

actually, it wasn't problem of vue 3 itself. The problem was caused from 'vue-i18n' plugin which was solved by adding

__INTLIFY_JIT_COMPILATION__: true

to define object in vite.config.ts

https://github.com/intlify/vue-i18n-next/issues/1457