Webpack 不会在 Rails 应用程序中编译 Vue 文件

Webpack won't compile Vue files in a Rails application

我们有一个 Rails 5 项目,它是 运行ning webpack(通过 webpacker gem)以及正常的资产管道。在过去的几个月里,一切都很顺利,直到昨天,由于某种原因,webpack 停止编译我们的 Vue 文件。

这是错误堆栈跟踪:

ERROR in ./app/javascript/packs/Comments.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|   <div class="comments-list">
|       <div v-for="comment in comments">
 @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/Comments.vue

ERROR in ./app/javascript/packs/Comment.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|   <div>
|       <div class="main-comment">
 @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/Comment.vue

ERROR in ./app/javascript/packs/Autocomplete.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|     <div class="comment-box" v-bind:class="{'open':openSuggestion}">
|         <textarea class="form-control" type="text" :value="value" @input="updateValue($event.target.value)"
 @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/Autocomplete.vue

ERROR in ./app/javascript/packs/cart.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|     <div class="container">
|         <div v-if="bundles.length != 0 || courses.length != 0" class="payment-section">
 @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/cart.vue

ERROR in ./app/javascript/packs/itemCheckout.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|     <li class="course-checkout">
|         <a class="course-name"> {{ item.name }} </a>
 @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/itemCheckout.vue

ERROR in ./app/javascript/packs/WishlistWindow.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|   <div class="wishlist-window">
|         <div v-if="bundles.length == 0 && courses.length == 0" class="wrapper empty">
 @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/WishlistWindow.vue

ERROR in ./app/javascript/packs/app.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|   <div id="app">
|       <div class="new-comment-wrapper">
 @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/app.vue

ERROR in ./app/javascript/app.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|   <div id="app">
|     <p>{{ message }}</p>
 @ ./app/javascript/packs/hello_vue.js 9:0-29
 @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/hello_vue.js

ERROR in ./app/javascript/packs/quizapp.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|   <div id="quizapp">
|     <div class="row">
 @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/quizapp.vue

ERROR in ./app/javascript/packs/WishlistLink.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|   <div>
|     <li id="wishlist" @mouseover="showWishlist" @mouseleave="displayWishlist = false" :data-content="wishlistLength" > 
 @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/WishlistLink.vue

ERROR in ./app/javascript/packs/PayPalCheckout.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div :id="id" class="paypal-button"></div>
| </template>
 @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/PayPalCheckout.vue

这是 package.json 文件:

{
  "name": "lacerba",
  "version": "1.0.0",
  "description": "This README would normally document whatever steps are necessary to get the application up and running.",
  "main": "index.js",
  "directories": {
    "lib": "lib",
    "test": "test"
  },
  "dependencies": {
    "@rails/webpacker": "^3.3.0",
    "autocomplete-vue": "^1.0.3",
    "axios": "^0.16.2",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.3",
    "babel-preset-env": "^1.6.1",
    "browserify": "^14.1.0",
    "browserify-incremental": "^3.1.1",
    "caniuse-lite": "^1.0.30000815",
    "coffeescript": "1.12.7",
    "css-loader": "^0.28.10",
    "modernizr": "3.3.1",
    "moment": "^2.18.1",
    "videojs-mux": "^2.0.27",
    "vue": "^2.5.13",
    "vue-analytics": "^5.8.0",
    "vue-live-edit": "^1.0.3",
    "vue-loader": "^14.1.1",
    "vue-momentjs": "^0.1.1",
    "vue-paypal-checkout": "^2.1.8",
    "vue-stripe-checkout": "^0.0.4",
    "vue-template-compiler": "^2.5.13",
    "vue-typeahead": "^2.3.2",
    "webpack": "^3.11.0"
  },
  "devDependencies": {
    "video.js": "^5.20.3",
    "webpack-cli": "^2.0.10",
    "webpack-dev-server": "^2.11.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/ugolino/lacerba.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/ugolino/lacerba/issues"
  },
  "homepage": "https://github.com/ugolino/lacerba#readme"
}

我尝试使用不同版本的 webpack and/or webpack-web-server,但是,它总是以相同的方式结束。虽然安装了 Babel,但它似乎无法读取我的 .vue 文件。

值得一提的是,在过去的几个月里,这种情况每隔一段时间就会发生一次,我总是只删除 node_modules 目录和 运行 yarn 命令将从头开始重新安装所有内容并消除错误。

不幸的是,情况已不再如此。有什么想法吗?

我遇到了类似的问题,主要是 webpack 版本问题。 我有 webpack 版本 4.1.1,我的配置使用 3.11 您可以使用 webpack --version 检查您的版本 在那之后 re-run 一个 bundle exec rails webpacker:installyarn install 它对我有用