Question

我正在运行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随附的打包的webpack，我知道它是在后台使用Babel的。

我相信webpack的Babel会将<％和其他语言一样解析，并在eval之前添加，但是我无法在线找到解析器配置选项。有人用这种方式对vue-cli解析代码有疑问吗？

任何帮助，我们将不胜感激！

Answer 1

关于您的问题，我有两个想法：

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

Vue CLI 3在评估功能之前添加到自定义模板标签

1 个答案: