Webpack, Rails, Vue, Vuetify - вам может понадобиться соответствующий загрузчик для обработки этого типа файлов - PullRequest
0 голосов
/ 24 октября 2018

Не уверен, почему это ломается.Я думал, что это может быть проблема с версией, но я попытался откатить свои версии без удачи.Я использую 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';
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...