Webpack，Rails，Vue，Vuetify-您可能需要适当的加载程序来处理此文件类型

Question

不确定为什么会这样。我以为这可能是版本问题，但是我尝试不走运回滚我的版本。我正在使用Ruby，Vue.js和Vuetify进行样式设置。我以为Vuetify可能会这样做，但是我尝试仅在我的h1页面上放置一个app.vue标记，但仍然引发相同的错误。我收到的错误是：

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

这是我的配置文件。

package.json

{
  "dependencies": {
    "@rails/webpacker": "3.5",
    "axios": "^0.18.0",
    "css-loader": "^1.0.0",
    "v-clipboard": "^2.0.1",
    "vue": "^2.5.17",
    "vue-loader": "^14.2.2",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.5.17",
    "vuelidate": "^0.7.4",
    "vuetify": "^1.3.2"
  },
  "devDependencies": {
    "webpack-dev-server": "2.11.2"
  },
  "scripts": {
    "start": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  }
}

我的vue.js文件

const { dev_server: devServer } = require('@rails/webpacker').config

const isProduction = process.env.NODE_ENV === 'production'
const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))
const extractCSS = !(inDevServer && (devServer && devServer.hmr)) || isProduction
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  test: /\.vue(\.erb)?$/,
  use: [{
    loader: 'vue-loader',
    options: { extractCSS }
  }],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

这是我的app.vue文件，其中包含删除的样式：

<template>
  <v-app class="my_background">
      <transition leave-active-class="animated slideOutLeft"  enter-active-class="animated slideInRight" mode="out-in">
        <component class="no_background" 
          :is="selected"
          transition="animated slideOutLeft"  
          mode="out-in"
        ></component>
      </transition>
  </v-app>
</template>

<script>
import welcome from '../components/welcome.vue';
import amazon_credentials from '../components/amazon_credentials.vue';
import speeds from '../components/speeds.vue';
import 'images/background.png';
import {dataShare} from '../packs/application.js';
import axios from 'axios';