Node.js 为什么vue loader和webpack-4不工作?

Node.js 为什么vue loader和webpack-4不工作?,node.js,vue.js,webpack,Node.js,Vue.js,Webpack,我正在尝试运行我自己的webpack-4+vue应用程序。使用这个package.json。我希望如果我做到这一点,我可以将其与现有的ASP.Net核心应用程序集成 { "name": "client-app", "version": "1.0.0", "description": "Proyecto con WebPack 4 y Vue 2", "

我正在尝试运行我自己的webpack-4+vue应用程序。使用这个package.json。我希望如果我做到这一点,我可以将其与现有的ASP.Net核心应用程序集成

{
  "name": "client-app",
  "version": "1.0.0",
  "description": "Proyecto con WebPack 4 y Vue 2",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --config webpack.config.vendor.js --mode development",
    "prod": "webpack --mode production"
  },
  "keywords": [
    "webpack-4",
    "vue-2",
    "vuetify"
  ],
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.1.5",
    "awesome-typescript-loader": "^5.2.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "base64-font-loader": "0.0.4",
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "i": "^0.3.6",
    "material-design-icons-iconfont": "^3.0.3",
    "mini-css-extract-plugin": "^0.4.2",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "typescript": "^2.7.2",
    "url-loader": "^1.1.1",
    "vue-loader": "^15.4.1",
    "vue-class-component": "^6.2.0",
    "vue-style-loader": "^4.1.2",
    "style-loader": "^0.23.0",
    "vue-template-compiler": "^2.5.17",
    "webpack-md5-hash": "0.0.6",
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.7",
    "webpack-hot-middleware": "^2.23.1"
  },
  "dependencies": {
    "vue": "^2.5.17",
    "vue-router": "^3.0.1",
    "vuetify": "^1.2.3",
    "vuex": "^3.0.1",
    "vuex-class": "^0.3.1"
  }
}
webpack.config.js

App.vue

我得到以下错误:

ERROR in ./src/components/App.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <template>
|   <div class="example">{{ msg }}</div>
| </template>
@ ./src/index.js 2:0-47 11:18-30
运行此命令节点_modules\.bin\webpack-config webpack.config.js-mode development时,它应该可以工作,但不能

这些是规格:

节点:v8.11.2 网页4.17.2 vuejs 2.5.17
您还想知道什么,请告诉我。

您似乎没有为.vue文件配置规则:您为.vue.html文件配置了一个规则,但不仅仅是为.vue文件。您可以通过删除\.html来更改现有规则,以使其正常工作

看起来您没有为.vue文件配置规则:您为.vue.html文件配置了一个规则,但不仅仅是为.vue文件。您可以通过删除\.html来更改现有规则,以使其正常工作

对于遇到此问题的任何其他人,需要在webpack plugins部分加载vue loader的较新版本:

// Required for vue-loader v15
const VueLoaderPlugin = require('vue-loader/lib/plugin')
environment.plugins.append(
  'VueLoaderPlugin',
  new VueLoaderPlugin()
)

对于遇到此问题的任何其他人,需要在“网页包插件”部分加载vue loader的较新版本:

// Required for vue-loader v15
const VueLoaderPlugin = require('vue-loader/lib/plugin')
environment.plugins.append(
  'VueLoaderPlugin',
  new VueLoaderPlugin()
)

// Required for vue-loader v15
const VueLoaderPlugin = require('vue-loader/lib/plugin')
environment.plugins.append(
  'VueLoaderPlugin',
  new VueLoaderPlugin()
)