Javascript Can'；不要在我的Rails5应用程序中使用vue组件

我不熟悉vue.js和网页包配置

我可以在

app/javascript/packs/somecode.js

中使用Vue实例

但我无法呈现

*.vue

文件。如果我将任何

*.vue

文件添加到

app/javascript/packs/components/

目录

上面说

“模块生成失败：ReferenceError:[BABEL]此错误的常见原因是存在没有相应预设名称的配置选项对象。”

但我没有创造任何新的选择

环境 红宝石

轨道

app.vue

<script>
export default {
  data: function () {
    return {
      message: "Hello Vue!"
    }
  }
}
</script>

B.法律改革委员会

  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": "> 1%",
        "uglify": true
      },
      "useBuiltIns": true
    }]
  ],

  "plugins": [
    "syntax-dynamic-import",
    "transform-object-rest-spread",
    ["transform-class-properties", { "spec": true }]
  ]
}

package.json

{
  "name": "appname",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "^3.4.3",
    "babel-loader": "^7.1.4",
    "coffeescript": "1.12.7",
    "intro.js": "^2.8.0-alpha.1",
    "rails-ujs": "^5.2.0",
    "vue": "^2.5.16",
    "vue-infinite-loading": "^2.3.1",
    "vue-loader": "^15.0.0-rc.2",
    "vue-template-compiler": "^2.5.16",
    "webpack-cli": "^2.0.13"
  },
  "devDependencies": {
    "webpack": "^3.11.0",
    "webpack-dev-server": "^2.11.1"
  },
  "scripts": {}
}

config/webpacker.yml

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  extensions:
    - .vue
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: /node_modules/


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

staging:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

---

嗯，尝试使用另一个名称。而不是App.vue，因为App.vue已存在，但相同的错误仍然存在。我发现，如果删除

标记，只将

添加到*.vue文件，编译成功。但我不知道为什么将

添加到vue组件会导致编译失败。如果将组件移出/packs并移入/javascript/components，会发生什么情况？我尝试了您的想法，但相同的错误仍然存在。./node_modules/babel loader/lib？？ref--1-0！中出错/节点\模块/vue加载程序/lib？？vue加载程序选项/app/javascript/components/Item.vue？vue&type=script&lang=js模块构建失败：ReferenceError:[BABEL]/Users/shiho/dev/myapp/app/javascript/components/Item.vue:未知选项：base.omit。查看有关选项的更多信息。我发现，如果我在node_modules/babel loader/lib/index.js中将

var loaderOptions=loaderUtils.getoptions（this）|{}

更改为

var loaderOptions={}

，则会出现错误。

  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": "> 1%",
        "uglify": true
      },
      "useBuiltIns": true
    }]
  ],

  "plugins": [
    "syntax-dynamic-import",
    "transform-object-rest-spread",
    ["transform-class-properties", { "spec": true }]
  ]
}

{
  "name": "appname",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "^3.4.3",
    "babel-loader": "^7.1.4",
    "coffeescript": "1.12.7",
    "intro.js": "^2.8.0-alpha.1",
    "rails-ujs": "^5.2.0",
    "vue": "^2.5.16",
    "vue-infinite-loading": "^2.3.1",
    "vue-loader": "^15.0.0-rc.2",
    "vue-template-compiler": "^2.5.16",
    "webpack-cli": "^2.0.13"
  },
  "devDependencies": {
    "webpack": "^3.11.0",
    "webpack-dev-server": "^2.11.1"
  },
  "scripts": {}
}

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  extensions:
    - .vue
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: /node_modules/


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

staging:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')

module.exports = environment.toWebpackConfig()