Laravel 8项目使用vue-stars实现星级评分时星星无法加载显示

你遇到的渲染异常主要由以下4个常见问题导致：

• 组件仅完成导入操作，未在Vue实例中完成注册，Vue无法识别<vue-stars>自定义标签
• 调用组件时错误给静态字符串属性添加了v-bind绑定前缀:，Vue会将属性值作为JS变量解析，无法读取到对应值导致渲染失效：比如:char="★"会把★识别为未定义的变量，:active-color="#ffdd00"会把#ffdd00识别为非法JS表达式
• Vue版本和vue-stars包版本不兼容：vue-stars 1.x仅支持Vue 2，2.x仅支持Vue 3，版本不匹配会导致组件无法正常初始化
• 你配置的inactive-char为空值，未选中状态的星星没有对应字符可渲染

异常效果图：

1. 确认并安装匹配版本的vue-stars

• 若你的Laravel 8项目使用Vue 2.x，执行安装命令：
  npm install vue-stars@1
• 若使用Vue 3.x，执行安装命令：
  npm install vue-stars@latest

2. 正确注册组件
   Vue 2 下app.js注册代码：

import Vue from 'vue'
// Vue2版本vue-stars为默认导出，不需要加解构大括号
import VueStars from 'vue-stars'
// 全局注册组件
Vue.component('vue-stars', VueStars)
// 后续保留你原有初始化Vue实例的代码

Vue 3 下app.js注册代码：

import { createApp } from 'vue'
// Vue3版本为命名导出，需要解构引入
import { VueStars } from 'vue-stars'
const app = createApp({})
// 全局注册组件
app.component('vue-stars', VueStars)
// 后续保留你原有挂载实例的代码

3. 修正组件调用写法

<vue-stars
      name="demo"
      active-color="#ffdd00"
      inactive-color="#999999"
      shadow-color="#ffff00"
      hover-color="#dddd00"
      :max="5"
      :value="3"
      :readonly="false"
      char="★"
      inactive-char="☆"
/>

说明：静态字符串属性不需要加:前缀，仅动态绑定的变量/数字/布尔值/JS表达式需要加:前缀，inactive-char需要赋值对应字符才能正常显示未选中状态的星星

4. 重新编译前端资源
   执行命令重新打包：
   npm run dev
   编译完成后清空浏览器缓存刷新页面即可正常渲染。

内容的提问来源于stack exchange，提问作者uditha.kanishka