Question

我们有一个Rails 5项目，它运行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和/或webpack-web-server，但是，它总是以相同的方式结束。虽然安装了Babel，但似乎无法读取我的.vue文件。

值得一提的是，在过去几个月中，这种情况偶尔会发生，我总是只删除node_modules目录并运行将要安装的 yarn 命令一切都从头开始，摆脱错误。

不幸的是，情况不再如此。有什么想法吗？

Answer 1

我有类似的问题，主要是由于webpack版本。我有webpack版本4.1.1，我的配置正在使用3.11 您可以使用webpack --version检查您的版本之后重新运行bundle exec rails webpacker:install和yarn install 它对我有用

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

1 个答案: