javascript - How to fix parse error during Vue app deployment? - Stack Overflow

admin管理员组

文章数量:1401600

I try to deploy Vue app for uploading on GitHub Pages, but got such parse error:

95: </script>
             ^
96: <template>
97:   <Navbar
error during build:
Error: Parse error @:95:10
    at parse$b (file:///C:/Users/User/vContact/vContact/node_modules/vite/dist/node/chunks/dep-a713b95d.js:33668:355)
    at Object.transform (file:///C:/Users/User/vContact/vContact/node_modules/vite/dist/node/chunks/dep-a713b95d.js:42856:27)

My code:

<script >
import { RouterLink, RouterView } from "vue-router";
import Navbar from "./ponents/Navbar.vue";
import Contacts from "./ponents/Contacts.vue";
import Modal from "./ponents/Modal.vue";
import AddButton from "./ponents/AddButton.vue";

export default{
ponents: {
  Navbar,
  Contacts,
  Modal,
  AddButton
},
data(){
  return {
    currentId: 1,
    modalOpen: false,
     contacts: [],
     edit: false,
     editContact: {},
     search: ''
  }
},
created(){
  this.getContacts()
},
puted: {
  // filterContacts(){
  //   return this.search ? this.contacts.filter(contact => 
  //   contact.fullName.toLowerCase().includes(this.search.toLowerCase())) : 
 this.contacts;
  // },
  filterContacts(){
    return this.search ? 
    this.contacts.filter(contact => {
      for(let key in contact){
        if(String(contact[key]).toLowerCase().includes(this.search.toLowerCase())){
          return contact;
        }
      }
    })
    : this.contacts;
  },
  // filterContactsCategory(){
  //   return this.search ? this.contacts.filter(contact => 
contact.category.toLowerCase().includes(this.search.toLowerCase())) : this.contacts;
  // }
},
methods: {
  openModal(){
    this.modalOpen = true
  },
  closeModal(){
    this.modalOpen = false
    this.edit = false
  },
  addContact(item){
      this.contacts.push(item)
      this.modalOpen = false
  },
  deleteContact(id){
      let index = this.contacts.findIndex(contact => contact.id == id)
      this.contacts.splice(index, 1)
  },
  changeContact(id){
  this.edit = this.modalOpen = true
  let pickedContact = this.contacts.find(contact => contact.id == id)
  this.editContact = pickedContact
  },
  editedContact(contactEdited){
    this.contacts.forEach(contact => {
      if(contact.id == contactEdited.id) {
        contact.fullName = contactEdited.fullName
        contact.phoneNumber = contactEdited.phoneNumber
        contact.email = contactEdited.email
        contact.category = contactEdited.category
      }
    })
  },
  getContacts(){
    const localContacts = localStorage.contacts
    if(localContacts){
      this.contacts = JSON.parse(localContacts)
    }
  }
},
watch: {
  contacts: {
    handler(newContacts){
      localStorage.contacts = JSON.stringify(this.contacts)
       },
      deep: true
    }
  }
}
</script>
<template>
 <Navbar 
 @searchValue="search = $event"
 />
 <Contacts 
 :contacts="filterContacts"
 @delContact="deleteContact" 
 @changeContact="changeContact"
 :search="search"
 />
 <Modal 
 :edit="edit"
 :editContact="editContact"
 @addContact="addContact"
 :currentId="currentId" 
 v-show="modalOpen" 
 @closeModal="closeModal" 
 @editedContact="editedContact"
 />
 <AddButton 
 @openModal="openModal" 
 />
 <RouterView />
</template>

I try to deploy Vue app for uploading on GitHub Pages, but got such parse error:

95: </script>
             ^
96: <template>
97:   <Navbar
error during build:
Error: Parse error @:95:10
    at parse$b (file:///C:/Users/User/vContact/vContact/node_modules/vite/dist/node/chunks/dep-a713b95d.js:33668:355)
    at Object.transform (file:///C:/Users/User/vContact/vContact/node_modules/vite/dist/node/chunks/dep-a713b95d.js:42856:27)

My code:

<script >
import { RouterLink, RouterView } from "vue-router";
import Navbar from "./ponents/Navbar.vue";
import Contacts from "./ponents/Contacts.vue";
import Modal from "./ponents/Modal.vue";
import AddButton from "./ponents/AddButton.vue";

export default{
ponents: {
  Navbar,
  Contacts,
  Modal,
  AddButton
},
data(){
  return {
    currentId: 1,
    modalOpen: false,
     contacts: [],
     edit: false,
     editContact: {},
     search: ''
  }
},
created(){
  this.getContacts()
},
puted: {
  // filterContacts(){
  //   return this.search ? this.contacts.filter(contact => 
  //   contact.fullName.toLowerCase().includes(this.search.toLowerCase())) : 
 this.contacts;
  // },
  filterContacts(){
    return this.search ? 
    this.contacts.filter(contact => {
      for(let key in contact){
        if(String(contact[key]).toLowerCase().includes(this.search.toLowerCase())){
          return contact;
        }
      }
    })
    : this.contacts;
  },
  // filterContactsCategory(){
  //   return this.search ? this.contacts.filter(contact => 
contact.category.toLowerCase().includes(this.search.toLowerCase())) : this.contacts;
  // }
},
methods: {
  openModal(){
    this.modalOpen = true
  },
  closeModal(){
    this.modalOpen = false
    this.edit = false
  },
  addContact(item){
      this.contacts.push(item)
      this.modalOpen = false
  },
  deleteContact(id){
      let index = this.contacts.findIndex(contact => contact.id == id)
      this.contacts.splice(index, 1)
  },
  changeContact(id){
  this.edit = this.modalOpen = true
  let pickedContact = this.contacts.find(contact => contact.id == id)
  this.editContact = pickedContact
  },
  editedContact(contactEdited){
    this.contacts.forEach(contact => {
      if(contact.id == contactEdited.id) {
        contact.fullName = contactEdited.fullName
        contact.phoneNumber = contactEdited.phoneNumber
        contact.email = contactEdited.email
        contact.category = contactEdited.category
      }
    })
  },
  getContacts(){
    const localContacts = localStorage.contacts
    if(localContacts){
      this.contacts = JSON.parse(localContacts)
    }
  }
},
watch: {
  contacts: {
    handler(newContacts){
      localStorage.contacts = JSON.stringify(this.contacts)
       },
      deep: true
    }
  }
}
</script>
<template>
 <Navbar 
 @searchValue="search = $event"
 />
 <Contacts 
 :contacts="filterContacts"
 @delContact="deleteContact" 
 @changeContact="changeContact"
 :search="search"
 />
 <Modal 
 :edit="edit"
 :editContact="editContact"
 @addContact="addContact"
 :currentId="currentId" 
 v-show="modalOpen" 
 @closeModal="closeModal" 
 @editedContact="editedContact"
 />
 <AddButton 
 @openModal="openModal" 
 />
 <RouterView />
</template>

• javascript
• vue.js
• deployment

Share Improve this question Follow edited Sep 19, 2022 at 11:58 Jaromanda X 1 asked Sep 19, 2022 at 11:49 Vlad Vlad 7144 bronze badges 3

• looks like you try to ment out some puted values ... and failed to ment them out properly - this is where well formatted code makes debugging easier - lines 32 and 47 seem to be the issue – Jaromanda X Commented Sep 19, 2022 at 12:01
• I deleted them, but still get the same error. – Vlad Commented Sep 20, 2022 at 14:02
• well, the code you posted parses fine for me - which version of vue by the way - as it states in the description of the vue.js tag you should also include vue2 or vue3 as they are vastly different – Jaromanda X Commented Sep 20, 2022 at 14:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

did you put

import vue from '@vitejs/plugin-vue';

in your vite.config.js file, after (of course) installing it via npm?

Expanding on Stephan Franks answer, I had the exact same error as OP, and putting this in vite.config.ts did the trick for me.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()], // <-- This is where the magic happens
})

For more information, please have a look at the documentation for @vitejs/plugin-vue.

本文标签： javascriptHow to fix parse error during Vue app deploymentStack Overflow