如何允许pug页面由erb预编译(带有`.pug.erb`扩展)

Question

我是Rails + Vue的新手。我用Vue创建了一个新的rails项目，作为模板的呈现器，我正在使用PUG。在VUE文件中我有：

<template src="../pages/cars.pug.erb" lang='pug'></template>

我需要页面上的资产。对于帕格，我增加了一个装载机

module.exports = {
  test: /\.pug(\.erb)?$/,
  loaders: 'pug-html-loader'
}

我的cars.pug.erb看起来就像

div
  <% helpers = ActionController::Base.helpers %>
  div(class="<%= 1 + 1%>")

但它给了我

 ERROR in ./app/assets/javascript/packs/pages/cars.pug.erb
12:27:54 webpacker.1 | Module parse failed: ../node_modules/pug-html-loader/lib/index.js!../node_modules/rails-erb-loader/index.js??ref--3!../app/assets/javascript/packs/pages/cars.pug.erb Unexpected token (1:0)
12:27:54 webpacker.1 | You may need an appropriate loader to handle this file type.
12:27:54 webpacker.1 | | <div><div class="2"></div></div>
12:27:54 webpacker.1 |  @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 ./app/assets/javascript/packs/pages/cars.pug.erb

看起来它呈现.erb和.pug，但出于某种原因它停止了(顺便说一句，我试图编写加载程序：“”，“pug加载器”，它开始忽略.erb)。

有人能告诉我如何解决这个烦人的问题吗？

Ps.Rails- 5.1.3和全新的项目与最新的libs P.P.S。我在这里做了一个问题，https://github.com/rails/webpacker/issues/620

更新10.8.2017:

这是关于.vue的

这段代码工作正常

<template lang='pug'>
  div
    div <%= "test"%>
</template>

但是当它在一个单独的文件中时

<template src="../pages/cars.pug.erb" lang='pug'></template>

它不起作用。我想"vue-loader“已经是个问题了

Answer 1

国防部注意事项:从上述问题中提取的答案，请参阅revision 4

正如我前面提到的，这个问题出现在“vue-加载程序”中。我需要“预编译”.erb，然后它才能按照lang编译(在我的例子中，lang='pug')。

为此，我添加了"preLoader“，并加载了”vue-加载程序“。

preLoaders: {
  pug: 'rails-erb-loader'
}

因为我使用Rails 5+ Webpacker + Vue.js，所以我把它放在webpack/loader/vue.js中

module.exports = {
  test: /.vue$/,
  loader: 'vue-loader',
  options: {
    extractCSS: true,
    loaders: {
      js: 'babel-loader',
      file: 'file-loader',
      scss: 'vue-style-loader!css-loader!postcss-loader!sass-loader',
      sass: 'vue-style-loader!css-loader!postcss-loader!sass-loader?indentedSyntax'
    },
    preLoaders: {
      pug: 'rails-erb-loader'
    }
  }
}

基本上，它在模板中检查lang，在使用主加载器作为该语言之前，它预编译了preLoaders加载器中提供的代码。