Vue JS、Webpack和JSP的内容安全策略错误

Question

我正在尝试将Vue JS集成到一个最新版本为2.4.2的应用程序中。后端实现使用struts，我们在响应头中设置Content-Security-Policy script-src 'self‘'unsafe-inline’。

一开始，我试图使用独立的Vue JS，而不是使用webpack或其他任何工具。当我使用Vue JS执行我的页面时，我看到以下CSP错误：

Vue warn:看起来你是在一个内容安全策略禁止不安全评估的环境中使用Vue.js的独立版本。模板编译器无法在此环境中工作。考虑放宽策略，允许不安全的评估或将模板预编译成呈现函数。

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

为了避免这个问题，我已经开始使用webpack预编译模板，这样这个问题就会得到解决，我仍然在webpack JS中看到以下错误：

EvalError:拒绝将字符串求值为JavaScript，因为在以下内容安全策略指令“" script -src 'self‘'unsafe-inline'”中，“”unsafe-eval“”不是允许的脚本源。“”

开启CSP的情况下，有没有解决方案使用webpack / Vue JS？处理CSP问题的合适解决方案是什么？

示例：Vue is not detected when JSP is loaded through struts

提前感谢您的帮助。

Answer 1

了解到在webpack配置文件中有不同的选项来设置"devtools“属性。

问题和解决方案详细信息：https://github.com/webpack/webpack/issues/4094

https://webpack.js.org/configuration/devtool/#devtool介绍了用于解决CSP问题的详细选项和选择。