Vue3定义全局属性和方法并在组件中使用，解决组建中报错的问题

定义全局属性和方法需要在main.ts中定义：例如这里定义一个变量env和一个函数filter 

// 定义全局变量和全局函数
app.config.globalProperties.env = "dev"

app.config.globalProperties.filter = {
  format<T>(content:T){
    return "格式化后的内容" + content
  }
}

然后在Vue组件

虽然页面上有正常渲染，但是模板里面缺报错： 报错的原因是找不到属性env，那就需要在main.ts中声明一下这个变量和函数

解决变量和函数找不到的报错

在main.ts中声明一下：

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.use(ElementPlus)
// 定义全局变量和全局函数
app.config.globalProperties.env = "dev"

app.config.globalProperties.filter = {
  format<T>(content:T){
    return "格式化后的内容" + content
  }
}

// 解决Vue中的全局变量和函数报错问题
interface Filter {
  format<T>(content:T):string
}
declare module 'vue' {
  export interface ComponentCustomProperties {
    filter: Filter,
    env:string
  }
}



app.mount('#app')

保存后，再回到Vue文件中，就不报错了：