5.1 레일의 Vue JS 2 '이 파일 형식을 처리하려면 적절한 로더가 필요할 수 있다.'

5.1 레일의 Vue JS 2 '이 파일 형식을 처리하려면 적절한 로더가 필요할 수 있다.'

기존 레일즈 앱에 VueJS를 추가하고 싶다.

그래서 나는 이 보석들을 내 Gemfile에 추가했다.

gem 'webpacker'
gem 'foreman' 

그리고 나는 달렸다.bundle,rails webpacker:install,rails webpacker:install:vue,yarn install.

그것은 a를 창조했다.javascript폴더:app.vue일렬 종대로packs와 함께 폴더로 저장하다.hello_vue.js일렬 종대로application.js파일

앱/앱/앱부에를 하다

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

앱/스파이프/팩/응용 프로그램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')

app/pack/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 파일(Hellowworld 예제가 제대로 작동하는지 보기 위해):

<%= 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

어떻게 하면 레일에서 Vue JS를 제대로 사용할 수 있을까?

나도 같은 문제가 있었어.그러나 보석을 업데이트하는 것은 나에게 도움이 되지 않았다.

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/enviation.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

이는 Vue-LoaderPlugin이 필요한 Vue-Loader v.15로 인해 발생할 수 있지만 기본 웹 팩 구성에는 아직 Vue-LoaderPlugin이 없기 때문에 발생할 수 있다.

최근호: https://github.com/rails/webpacker/issues/1453

Webpacker 3의 경우 솔루션은 일시적으로 이전 vue-loader 버전으로 다운그레이드하는 것이다.

yarn upgrade vue-loader@14.2.2

패키지에서 vue-loader를 15.9.2로 다운그레이드.json은 나를 위해 일한다.

참조URL: https://stackoverflow.com/questions/47981803/vue-js-2-on-rails-5-1-you-may-need-an-appropriate-loader-to-handle-this-file-ty