如何修复Vue应用部署到GitHub Pages时出现的解析错误？

哎，我之前也碰到过Vite解析Vue单文件组件时的类似问题，错误指向</script>标签，本质是解析器没能正确识别脚本块的结束位置。我帮你梳理几个大概率能解决问题的方向：

1. 调整SFC标签顺序（最直接的修复尝试） #

虽然Vue官方说单文件组件的标签顺序可以任意，但Vite的解析器对<template>在前的结构兼容性更好。你可以试着把<template>块移到<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>

<script>
import { RouterLink, RouterView } from "vue-router";
import Navbar from "./components/Navbar.vue";
import Contacts from "./components/Contacts.vue";
import Modal from "./components/Modal.vue";
import AddButton from "./components/AddButton.vue";
export default{
components: { Navbar, Contacts, Modal, AddButton },
data(){
return {
currentId: 1,
modalOpen: false,
contacts: [],
edit: false,
editContact: {},
search: ''
}
},
created(){
this.getContacts()
},
computed: {
// 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>

2. 修复脚本内的逻辑细节（顺带优化） #

虽然这不是导致解析错误的原因，但我注意到你filterContacts里的回调函数返回的是contact对象，而Array.filter()需要的是布尔值——这会导致逻辑异常，建议改成：

filterContacts(){
return this.search ? this.contacts.filter(contact => {
for(let key in contact){
if(String(contact[key]).toLowerCase().includes(this.search.toLowerCase())){
return true; // 改成返回布尔值，符合filter的预期
}
}
return false; // 增加默认返回值，避免隐式undefined
}) : this.contacts;
},

3. 确认Vite配置正确 #

检查你的vite.config.js，确保Vue插件已正确配置，同时部署GitHub Pages需要设置base路径（和仓库名一致）：

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

export default defineConfig({
  plugins: [vue()],
  base: '/vContact/' // 这里替换成你的GitHub仓库名称
})

4. 部署脚本配置检查 #

最后确认package.json里的部署脚本没问题：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.3.4",
    "gh-pages": "^6.0.0",
    "vite": "^4.4.9",
    "vue": "^3.3.4"
  }
}

如果没装gh-pages，先执行npm install gh-pages --save-dev，再运行npm run deploy即可部署。

内容的提问来源于stack exchange，提问作者Vlad