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