我正在用 Vue.js 编写我网站的一个页面。我有一个 file.html 和一个 file.js。 file.html 看起来像这样:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<body>
<div id="app">
// everything to be displayed on the page (data, v-if & v-else tags etc.)
</div>
</body>
file.js 看起来像这样:
new Vue({
el: '#app',
data: {
msg: "hello",
// some other data
}
});
当我加载网站时，警告显示:
vue@2.3.4:440 [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.
我必须在我的应用程序中禁止 eval，所以唯一的方法是预编译 vue 代码。我查看了 Webpack 和 Browserify，但它们看起来相当复杂并且总是与一个完整的应用程序一起使用，而我只想预编译一个文件。
有什么办法吗？ 提前致谢。
最佳答案
不，据我所知没有办法做到这一点。 要预编译模板，您必须使用单个文件组件(或 jsx)。
我认为这是您的备选方案的完整列表:
使用 browserify与 vueify .
使用 webpack与 vue loader .
使用 gulp与 gulp-vueify2 (我的包裹)。它可以让你 编译单个文件而不捆绑整个文件(但像 以前的解决方案，它必须是一个单一的文件组件)，但它很棘手 在不支持 native 模块的环境中工作 系统，例如大多数浏览器(参见 this question )。
使用 jsx module for babel .
也许您可以想象使用 the core template compiler 的自定义解决方案.
关于webpack - 将 vue 模板预编译为渲染函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44646403/