Vue CLI 3将eval功能预先添加到自定义模板标签

Posted 2021-05-06

我正在运行webpack-dev服务器来开发Vue应用程序（Vue CLI 3）。我们公司使用类似于ASP.NET的自定义模板语言（函数以<％前缀开头，后缀为％>后缀，并且它们被评估为服务器端），这似乎导致webpack-dev服务器出现问题。在下面的例子中，我试图将specs变量设置为<%json_item_specifications%>：

  export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      specs: <%json_item_specifications%>,
    }
  }
}

在上面的示例中，webpack将使用eval函数转义json函数，并将其作为导出的一部分返回：

eval("__webpack_require__.r(__webpack_exports__ ...

领先的eval导致页面中断，我不确定webpack堆栈的哪个部分会导致这种情况。我正在使用vue-cli 3附带的打包网络包，我知道它使用了引擎盖下的Babel。

我相信来自webpack的Babel正在解析<％作为其他语言并在eval之前进行解析，但我无法在线找到解析器配置选项。有没有人用这种方式解决vue-cli解析代码的问题？

任何和所有的帮助表示赞赏！

答案

我对你的问题有两点看法：

1. 您应该尝试使用X-templates（而不是单个文件组件）或内联模板与独立版本的Vue。你可以在这里阅读更多相关信息：https://sebastiandedeyne.com/dealing-with-templates-in-vue-20
2. 另一种可能的解决方案是规范的本地化。我只有Wordpress（php）的经验，但您可以通过PHP创建一个javascript对象，您可以在模板中稍后阅读这些设置。