Vue3 运行可以,build 打包发布报错,app.config.globalProperties 用法坑

app.config.globalProperties 用法坑Vue,

多环境配置 https://www.cnblogs.com/vipsoft/p/16696640.html

main.js

import config from '@/utils/config'
//这是对 Vue 2 中 Vue.prototype 使用方式的一种替代,此写法在 Vue 3 已经不存在了。与任何全局的东西一样,应该谨慎使用。
app.config.globalProperties.$config = config

image

错误原因

config.js

const config = {
  title: '管理系统(开发)', //开发、测试
  apiUrl: 'http://www.vipsoft.com.cn',
  version: 'v1.0.1'
}
export default config

vue
login\index.vue

 <h3 class="title">{{this.$config.title}}</h3>

报错

main.js:32 TypeError: Cannot read properties of undefined (reading '$config')
    at chunk-f033586a.20f75701.js:1:1719
    at r (runtime-core.esm-bundler.js:827:13)
    at Er (runtime-core.esm-bundler.js:2973:53)
    at Proxy.ih (index.js:217:5)
    at Jt (runtime-core.esm-bundler.js:887:16)
    at d.i [as fn] (runtime-core.esm-bundler.js:6020:46)
    at d.run (reactivity.esm-bundler.js:177:19)
    at L.e.update (runtime-core.esm-bundler.js:6151:16)
    at L (runtime-core.esm-bundler.js:6161:5)
    at A (runtime-core.esm-bundler.js:5929:7)

image

解决方案

login\index.vue

<h3 class="title">{{config.title}}</h3>
<script>
import { ref,getCurrentInstance} from 'vue'

export default {
  setup(){
    const instance = getCurrentInstance()
    const config = instance?.appContext.config.globalProperties.$config;

    return {
       config
    }
  }
}

</script>

image

简化写法

<script setup>
import { ref,getCurrentInstance} from 'vue'

const instance = getCurrentInstance()
const config = instance?.appContext.config.globalProperties.$config;

</script>

image

https://cn.vuejs.org/api/sfc-script-setup.html
<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的

posted @ 2024-06-11 12:45  VipSoft  阅读(69)  评论(0编辑  收藏  举报