![](/img/trans.png)
[英]You may need an appropriate loader to handle this file type. ReactJs
[英]Vue JS 2 on rails 5.1 'You may need an appropriate loader to handle this file type.'
我想将 VueJS 添加到我现有的 rails 应用程序中。
所以我将这些 gem 添加到我的 Gemfile 中:
gem 'webpacker'
gem 'foreman'
然后我运行bundle
, rails webpacker:install
, rails webpacker:install:vue
, yarn install
。
它创建了一个javascript
文件夹,其中包含:一个app.vue
文件和一个packs
hello_vue.js
文件和一个application.js
文件的packs
文件夹。
应用程序/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?
我有同样的问题。 但是更新 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
这可能是因为 vue-loader v.15 需要 VueLoaderPlugin 但默认的 webpack 配置还没有它。
最近一期: https : //github.com/rails/webpacker/issues/1453
对于 Webpacker 3,解决方案是暂时降级到之前的 vue-loader 版本。
yarn upgrade vue-loader@14.2.2
将 package.json 中的 vue-loader 降级到 15.9.2 对我有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.