Webpack无法查看Vue文件

Question

由于某些原因，我无法启动和运行我的Vue项目。我有另一个项目，具有完全相同的设置和版本，工作正常，但在此安装过程中，我收到以下错误：

ERROR in ./app/javascript/components/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.16",
    "vue-loader": "14.2.2",
    "vue-router": "3.0.1",
    "vue-template-compiler": "2.5.16",
    "vuelidate": "^0.7.4",
    "vuetify": "^1.3.3"
  },
  "devDependencies": {
    "webpack-dev-server": "2.11.2"
  }
}

我的app.vue文件：

<template>
  <v-app class="my_background">
    <h1>hi</h1>
  </v-app>
</template>

<script>
import 'images/background.png';
import axios from 'axios';

export default {
  data: function() {
    return{};
  }
};    
</script>

最后是我的webpack配置文件。

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

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

Answer 1

您的webpack配置不会处理png (或任何图像文件)的加载。

加载镜像时，至少需要url-loader。

而且你可以按照一个guide来正确设置webpack url-loader。