Vue3 中使用 单文件组件 <script setup> 后js中访问全局定义属性/方法（app.config.globalPropert）访问不到的解决方法

定义全局属性/方法

    // mian.js
    import { createApp } from "vue";
    import App from "./App.vue";
    import router from "./router";
    import store from "./store";
    
    const app = createApp(App);
    app.config.globalProperties.$url = "http://localhost:8081/";
    app.config.globalProperties.$ajax = ()=>{};
    app.use(store).use(router).mount("#app");

这是正常在main.js中定义全局属性方法的正常操作，在组件中可以不用定义直接访问，但是如果组件中使用了setup语法糖的话，就会报未定义错误，但是<template></template>模板页中可以正常访问。

原因是因为

里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 <script> 只在组件被首次引入的时候执行一次不同，<script setup> 中的代码会在每次组件实例被创建的时候执行。

解决办法

与普通的 <script> 一起使用

<script setup> 可以和普通的 <script> 一起使用。普通的 <script> 在有这些需要的情况下或许会被使用到：

• 无法在 <script setup> 声明的选项，例如 inheritAttrs 或通过插件启用的自定义的选项。
• 声明命名导出。
• 运行副作用或者创建只需要执行一次的对象。

<script>
// 普通 <script>, 在模块范围下执行(只执行一次)
runSideEffectOnce()

// 声明额外的选项
export default {
  inheritAttrs: false,
  customOptions: {}
}
</script>

<script setup>
// 在 setup() 作用域中执行 (对每个实例皆如此)
</script>

<script>
// 普通 <script>, 在模块范围下执行(只执行一次)
runSideEffectOnce()

// 声明额外的选项
export default {
  inheritAttrs: false,
  customOptions: {}
}
</script>

<script setup>
// 在 setup() 作用域中执行 (对每个实例皆如此)
</script>

该场景下不支持使用 render 函数。请使用一个普通的 <script> 结合 setup 选项来代替。