Vue3使用过滤器提示Filters are deprecated报错该如何解决

问题原因 #

1. Vue 3 已正式移除过滤器（Filters）相关API与|语法支持，这是触发Filters are deprecated报错的核心原因
2. 你的main.js同时混用了Vue 2和Vue 3的实例初始化逻辑，Vue.filter是Vue 2专属API，在Vue 3中不存在该方法

修复步骤 #

第一步：修正main.js逻辑 #

先删除冗余的Vue 2风格初始化代码，全局方法可以挂载到Vue 3实例的globalProperties上：

// 删除这行无效导入：import Vue from "vue";
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import "./scss/main.scss";
import "normalize.css";

const app = createApp(App)
// 全局挂载大写转换方法，替代原全局过滤器
app.config.globalProperties.$uppercase = (val) => val?.toUpperCase() || ''

app.use(store).use(router).mount("#app");
// 删除以下所有Vue 2风格代码：
// new Vue({...}).$mount("#app")
// Vue.config.productionTip = false
// Vue.filter(...)

第二步：修改组件模板语法 #

把原过滤器的|语法，替换为方法调用形式：

<template>
    <div class="post-box">
        <span class="views">{{ views }}</span>
        <h3 class="title">{{title}}</h3>
        <span class="date">{{ date }}</span>
        <p class="content">{{ content }}</p>
        <div class="row">
          <div class="col-sm-6 author">
            <!-- 替换为全局挂载的方法调用 -->
            <span class="post-author">{{ $uppercase(author) }}</span>
          </div>
          <div class="col-sm-6 category">
            <span class="post-category">{{category}}</span>
          </div>
        </div>
      </div>
</template>

<script>
export default {
  props: ['title','content','author','category','date','views'],
  name: "BlogPost",
};
</script>

可选方案：组件内局部定义转换方法 #

如果该大写逻辑只在当前组件使用，不需要全局挂载，可以直接在组件内定义方法：

export default {
  props: ['title','content','author','category','date','views'],
  name: "BlogPost",
  methods: {
    uppercase(val) {
      return val?.toUpperCase() || ''
    }
  }
};

模板中直接调用即可：{{ uppercase(author) }}

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