模块解析失败：意外的令牌 (1:0) vue.js vuex 存储答案

【问题标题】：Module parse failed: Unexpected token (1:0) vue.js vuex store模块解析失败：意外的令牌 (1:0) vue.js vuex 存储
【发布时间】：2017-06-25 09:41:26
【问题描述】：

无法用 vuex store 和 vue.js 找出这个错误：

这是 webpack-cli 的事情吗？还是我做的不对？感谢您的帮助！

Module parse failed: /Users/me/sites/vue/src/components/SectionView.Vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|   <ul class="listing">
|      <li v-for="item in $store.state.items">

 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/PanelBody.vue 3:0-56
 @ ./src/components/PanelBody.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Panel.vue
 @ ./src/components/Panel.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Accordion.vue
 @ ./src/components/Accordion.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Sidebar.vue
 @ ./src/components/Sidebar.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Body.vue
 @ ./src/components/Body.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

我的 SectionView.vue 文件：

<template>
  <ul class="listing">
     <li v-for="item in $store.state.items">
       <router-link :to="{ name: 'item', params: { id: item.id }}">
         <img :src="item.image" />
         <br>{{ item.name }}
       </router-link>
     </li>
   </ul>
</template>

<script>
import Item from '../components/Item',
export default {
  name: 'SectionView',
  components: {
    'item': Item
  },
  created () {
    this.$store.dispatch('fetch')
  }
},
}
</script>

我的项目.vue：

<template>
  <div id="section-view">
    <div class="item-view">
      <router-link class="back-listing" :to="{name: 'section'}">U+0003C</router-link>
      <div class="item">
        <h1>{{ item.name }}</h1>
        </div>
    </div>
</template>

<script>
export default {
  name: 'item',
  computed: {
    item: function () {
      return this.$store.state.items.find(item => item.id === this.$route.params.id)
    }
  },
  created () {
    this.$store.dispatch('open', this.$route.params.id)
  }
}
</script>

我的商店在 src/store/index.js 中：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const db = [
  { id: 'a', name: 'Item #1', image: 'http://lorempicsum.com/simpsons/350/200/1' },
  { id: 'b', name: 'Item #2', image: 'http://lorempicsum.com/simpsons/350/200/2' },
  { id: 'c', name: 'Item #3', image: 'http://lorempicsum.com/simpsons/350/200/3' }
]

const store = new Vuex.Store({

  state: {
    items: [],
    opened: {}
  },

  actions: {
    fetch: function ({commit, state}, payload) {
      commit('SET_LIST', db) // Just clone the array
    },
    open: function ({commit, state}, payload) {
      // look for item in local state
      var localItem = state.items.find(item => payload === item.id)
      if (!localItem) {
        new Promise(function (resolve, reject) {
          return db.find(item => payload === item.id)
        })
        .then(result => {
          commit('ADD_ITEM', result)
        })
      }
    }
  },

  mutations: {
    SET_LIST: function (state, payload) {
      Vue.set(state, 'items', payload)
    },
    ADD_ITEM: function (state, playload) {
      state.items.push()
    }
  }

})

console.log('State', store)
export default store

我的 main.js 调用商店：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import store from './store'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  template: '<App/>',
  components: { App }
})

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

就像@MateenRay 所说的“.Vue”而不是“.vue”确实可能是问题所在。

这与您的操作系统有关。

Windows 上的“FILE.txt”和“file.txt”是一样的。所以当你调用 vue 文件时，大写或小写都没关系。

但是对于 linux，“FILE.txt”和“file.txt”是两个独立的文件！所以调用“.Vue”文件与调用“.vue”文件是不一样的。

记住这一点很重要，因为在我的项目中，我们在 windows 上，并没有注意这一点。接下来，我们将所有文件名从“file”更改为“File”。接下来，我们不得不在一台 linux 机器上交付它，但由于找不到一些文件，所以没有任何工作......我们中的一些人仍在导入如下文件：

import file from ... 而不是import File from ...

它可以在 windows 上运行，但不能在 linux 上运行。

【讨论】：

【解决方案2】：

/Users/me/sites/vue/src/components/SectionView.Vue

我觉得名字SectionView.Vue应该是SectionView.vue

组件扩展为vue

【讨论】：

【解决方案3】：

对我来说，重新安装 babel 和 webpack 解决了这个问题。

npm install babel-core babel-loader babel-preset-es2015 webpack --save-devnpm install babel-core babel-loader babel-preset-es2015 webpack --save-dev

Link

【讨论】：