2

我对 Rails + Vue 很陌生。我用 Vue 创建了一个新的 rails 项目，并作为我正在使用 PUG 的模板的渲染器。在 VUE 文件中，我有：

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

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

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 但由于某种原因它停止了（顺便说一句，我尝试编写加载器：['html-loager', 'pug-html-loader'] 并且它开始忽略 .erb）

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

PS Rails - 5.1.3 和带有最新库的全新项目 PPS 我在这里提出了一个问题https://github.com/rails/webpacker/issues/620

2017 年 8 月 10 日更新：

事情是关于 .vue

此代码工作正常

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

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

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

这没用。我认为“vue-loader”已经是个问题了

4

1 回答 1

0

修改说明：从上面的问题中提取的答案，请参阅修订版 4

正如我上面提到的，问题出在“vue-loader”中。我需要先“预编译”.erb，然后它才能根据 lang 编译（在我的例子中是 lang='pug'）。

为此，我在加载“vue-loader”时添加了“preLoader”

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'
    }
  }
}

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

于 2020-06-19T14:11:22.530 回答