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警告]：您似乎正在使用独立版本在具有内容安全策略的环境中的Vue.js 禁止不安全评估。模板编译器无法在此工作环境。考虑放宽政策以允许不安全评估或将模板预编译为渲染函数。

我必须禁止在我的应用程序中使用eval，因此唯一的方法是预编译vue代码。我已经查看了Webpack和Browserify，但它们看起来相当复杂并且总是与一个整个应用程序一起使用，而我只想预编译一个文件。

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

Answer 1

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

以下是我对您的替代方案的完整列表：

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

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

1 个答案: