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

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

我认为名称SectionView.Vue应该为SectionView.vue

组件扩展为vue

Answer 2

就像@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上运行。

Answer 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

模块解析失败：意外的令牌（1：0）vue.js vuex存储

3 个答案: