vue.js - 模块解析失败 : Unexpected token (1:0) vue. js vuex store

Question

无法通过 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>

我的 Item.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 }
})

Answer 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 上不工作。