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

简介: 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

错误原因

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)

解决方案

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>

简化写法

<script setup>
import { ref,getCurrentInstance} from 'vue'
const instance = getCurrentInstance()
const config = instance?.appContext.config.globalProperties.$config;
</script>

https://cn.vuejs.org/api/sfc-script-setup.html

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的

目录
相关文章
|
6月前
|
存储 前端开发 API
可配置化App启动弹窗系统:实现后台动态管理与热更新引导-蜻蜓Q系统laravel+vue3-优雅草卓伊凡
可配置化App启动弹窗系统:实现后台动态管理与热更新引导-蜻蜓Q系统laravel+vue3-优雅草卓伊凡
404 5
可配置化App启动弹窗系统:实现后台动态管理与热更新引导-蜻蜓Q系统laravel+vue3-优雅草卓伊凡
|
7月前
|
缓存 小程序 iOS开发
基于uni-app+vue3手机桌面oadmin管理系统
基于uniapp+vue3+pinia2+uv-ui仿ios手机界面oa后台系统解决方案。支持运行到h5+小程序+app端。
366 5
|
机器学习/深度学习 存储 人工智能
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
MNN-LLM App 是阿里巴巴基于 MNN-LLM 框架开发的 Android 应用,支持多模态交互、多种主流模型选择、离线运行及性能优化。
10837 81
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
|
8月前
|
存储 Android开发 数据安全/隐私保护
Thanox安卓系统增加工具下载,管理、阻止、限制后台每个APP运行情况
Thanox是一款Android系统管理工具,专注于权限、后台启动及运行管理。支持应用冻结、系统优化、UI自定义和模块管理,基于Xposed框架开发,安全可靠且开源免费,兼容Android 6.0及以上版本。
940 4
|
8月前
|
缓存 小程序 视频直播
基于uni-app+vite5+vue3实战短视频+直播+聊天app应用
基于uniapp+vue3+vite5从0-1实战搭建仿抖音/微信直播带货商城。集短视频+聊天+直播功能于一体。实现全屏沉浸式切换短视频/直播,支持编译运行到h5+小程序端+app端。
493 4
|
10月前
|
存储 人工智能 移动开发
uni-app+vue3接入deepseek-v3搭建跨端ai流式(小程序+app+h5)
基于Uniapp+Vue3+Markdown接入DeepSeek-V3聊天大模型,支持编译到H5+小程序+App端。实现流式输出、支持亮色/暗黑主题、代码高亮、会话本地存储等功能。
1793 12
|
存储 文件存储 Android开发
仿第八区APP分发下载打包封装系统源码
该系统为仿第八区APP分发下载打包封装系统源码,支持安卓、iOS及EXE程序分发,自动判断并稳定安装。智能提取应用信息,自动生成PLIST文件和图标,提供合理的点数扣除机制。支持企业签名在线提交、专属下载页面生成、云端存储(阿里云、七牛云),并优化签名流程,支持中文包及合并分发,确保高效稳定的下载体验。 [点击查看源码](https://download.csdn.net/download/huayula/90463452)
705 22
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
1271 18
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
463 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
Java Spring 容器
springcloud-config客户端启用服务发现报错找不到bean EurekaHttpClient
解决 Spring Cloud Config 客户端启用服务发现时报错找不到 bean `EurekaHttpClient` 的问题,主要涉及版本兼容性、依赖配置和正确的配置文件设置。通过检查依赖版本、添加必要的依赖项、配置文件的正确性以及启用服务发现注解,可以有效解决此问题。确保日志中没有其他错误信息也是关键步骤之一。通过这些方法,可以确保 Spring Cloud Config 与 Eureka 客户端正常工作。
287 6