将 vue 模板预编译为渲染函数

Question

我正在 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，但它们看起来相当复杂并且总是与一个完整的应用程序一起使用，而我只想预编译一个文件。

有什么办法吗？提前致谢。

Answer 1

不，据我所知没有办法做到这一点。要预编译模板，您必须使用单个文件组件（或 jsx）。

这是我认为您的备选方案的完整列表：

使用browserify with vueify.
使用webpack with vue loader.
使用gulp with gulp-vueify2（我的包）。它可以让你编译单个文件而不捆绑整个文件（但像以前的解决方案，它必须是一个单一的文件组件），但它很棘手在不支持本机模块的环境中工作系统，例如大多数浏览器（参见）。
使用jsx module for babel.
也许您可以想象使用 the core template compiler 的自定义解决方案。

将 vue 模板预编译为渲染函数

Precompile vue template into render functions

browserify

webpack

vue.js