javascript - Vue JS 2 on Rails 5.1 'You may need an appropriate loader to handle this file type.'

Question

我想将 VueJS 添加到我现有的 Rails 应用程序中。

所以我将这些 gems 添加到我的 Gemfile 中:

gem 'webpacker'
gem 'foreman' 

然后我跑了bundle , rails webpacker:install , rails webpacker:install:vue , yarn install .

它创建了一个 javascript文件夹:一个app.vue文件和一个 packs带有 hello_vue.js 的文件夹文件和 application.js文件。

应用程序/javascript/app.vue

<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

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

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

应用程序/javascript/packs/application.js

/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb

console.log('Hello World from Webpacker')

应用程序/javascript/packs/hello_vue.js

/* eslint no-console: 0 */
// Run this example by adding <%= javascript_pack_tag 'hello_vue' %> (and
// <%= stylesheet_pack_tag 'hello_vue' %> if you have styles in your component)
// to the head of your layout file,
// like app/views/layouts/application.html.erb.
// All it does is render <div>Hello Vue</div> at the bottom of the page.

import Vue from 'vue'
import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () => {
  document.body.appendChild(document.createElement('hello'))
  const app = new Vue({
    render: h => h(App)
  }).$mount('hello')

  console.log(app)
})


// The above code uses Vue without the compiler, which means you cannot
// use Vue to target elements in your existing html templates. You would
// need to always use single file components.
// To be able to target elements in your existing html/erb templates,
// comment out the above code and uncomment the below
// Add <%= javascript_pack_tag 'hello_vue' %> to your layout
// Then add this markup to your html template:
//
// <div id='hello'>
//   {{message}}
//   <app></app>
// </div>


// import Vue from 'vue/dist/vue.esm'
// import App from '../app.vue'
//
// document.addEventListener('DOMContentLoaded', () => {
//   const app = new Vue({
//     el: '#hello',
//     data: {
//       message: "Can you say hello?"
//     },
//     components: { App }
//   })
// })
//
//
//
// If the using turbolinks, install 'vue-turbolinks':
//
// yarn add 'vue-turbolinks'
//
// Then uncomment the code block below:
//
// import TurbolinksAdapter from 'vue-turbolinks';
// import Vue from 'vue/dist/vue.esm'
// import App from '../app.vue'
//
// Vue.use(TurbolinksAdapter)
//
// document.addEventListener('turbolinks:load', () => {
//   const app = new Vue({
//     el: '#hello',
//     data: {
//       message: "Can you say hello?"
//     },
//     components: { App }
//   })
// })

我实际上想开始使用 VueJS 来构建我的 FAQ 页面，所以这是我的 faq.html.erb 文件(只是为了看看 helloworld 示例是否有效):

<%= javascript_pack_tag 'hello_vue' %>

<div id="hello container">
  <h1>{{message}}</h1>
 <app />
</div>;

然后我运行 foreman start .

我得到以下错误:

ERROR in ./app/javascript/app.vue
18:26:08 frontend.1 | Module parse failed: Unexpected token (1:0)
18:26:08 frontend.1 | You may need an appropriate loader to handle this file type.
18:26:08 frontend.1 | | <template>
18:26:08 frontend.1 | |   <div id="app">
18:26:08 frontend.1 | |     <p>{{ message }}</p>
18:26:08 frontend.1 |  @ ./app/javascript/packs/hello_vue.js 9:0-29
18:26:08 frontend.1 |  @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/hello_vue.js

如何在 Rails 上正确使用 Vue JS？

Answer 1

我遇到了同样的问题。但是更新 gem 对我没有帮助。

在config/webpack/development中我改成了

const environment = require('./environment')
const { VueLoaderPlugin } = require('vue-loader')

var newPlugin = environment.toWebpackConfig();
newPlugin.plugins.push(new VueLoaderPlugin());
module.exports = newPlugin;

在 config/webpack/enviroment.js 中

const { environment } = require('@rails/webpacker')
const vue =  require('./loaders/vue')

 environment.loaders.append('vue', vue)
 environment.loaders.append('babel', {
 test: /\.js$/,
  loader: 'babel-loader'
 })
 module.exports = environment