Content Security Policy error with Vue JS, Webpack and JSP

I am trying to integrate Vue JS in one of my application with latest version 2.4.2.Backend implementation uses struts and we set Content-Security-Policy script-src ‘self’ ‘unsafe-inline’ in response headers.

At first I was trying to use standalone Vue JS instead of using webpack or any other tool. I see the following CSP error when I execute my page using Vue JS :

[Vue warn]: It seems you are using the standalone build of Vue.js in an environment with Content Security Policy that prohibits unsafe-eval. The template compiler cannot work in this environment. Consider relaxing the policy to allow unsafe-eval or pre-compiling your templates into render functions.

warn — vue.min.js:485
compileToFunctions — vue.min.js:9842
$mount — vue.min.js:10040
Global Code —

To avoid this issue, I have started using webpack to pre-compile the templates so that the issue will be resolved and I still see the below error in webpack JS :

EvalError: 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’ ‘unsafe-inline’”.

Is there any solution to use webpack / Vue JS with CSP’s enabled ? What is the suitable solution to handle CSP issues.

Sample Example :

Thanks for your help in advance.

The runtime only build should be fully CSP compliant