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 时该语法是默认推荐。相比于普通的

目录
相关文章
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
563 7
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
686 1
|
28天前
|
C#
【Azure App Service】使用Microsoft.Office.Interop.Word来操作Word文档,部署到App Service后报错COMException
System.Runtime.InteropServices.COMException (0x80040154): Retrieving the COM class factory for component with CLSID {000209FF-0000-0000-C000-000000000046} failed due to the following error: 80040154 Class not registered (0x80040154 (REGDB_E_CLASSNOTREG)).
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
263 3
|
3月前
|
移动开发 Android开发 数据安全/隐私保护
移动应用与系统的技术演进:从开发到操作系统的全景解析随着智能手机和平板电脑的普及,移动应用(App)已成为人们日常生活中不可或缺的一部分。无论是社交、娱乐、购物还是办公,移动应用都扮演着重要的角色。而支撑这些应用运行的,正是功能强大且复杂的移动操作系统。本文将深入探讨移动应用的开发过程及其背后的操作系统机制,揭示这一领域的技术演进。
本文旨在提供关于移动应用与系统技术的全面概述,涵盖移动应用的开发生命周期、主要移动操作系统的特点以及它们之间的竞争关系。我们将探讨如何高效地开发移动应用,并分析iOS和Android两大主流操作系统的技术优势与局限。同时,本文还将讨论跨平台解决方案的兴起及其对移动开发领域的影响。通过这篇技术性文章,读者将获得对移动应用开发及操作系统深层理解的钥匙。
|
2月前
|
缓存 开发框架 移动开发
uni-app:下载使用uni&创建项目&和小程序链接&数据缓存&小程序打包 (一)
uni-app 是一个跨平台的开发框架,它允许开发者使用 Vue.js 来构建应用程序,并能够同时发布到多个平台,如微信小程序、支付宝小程序、H5、App(通过DCloud的打包服务)等。uni-app 的目标是通过统一的代码库,简化多平台开发过程,提高开发效率。 在这一部分中,我们将逐步介绍如何下载和使用uni-app、创建一个新的项目、如何将项目链接到小程序,以及实现数据缓存的基本方法。
|
4月前
|
存储 BI Android开发
全开源仿第八区H5APP封装打包分发系统源码
全开源仿第八区H5APP封装打包分发系统源码
147 4
|
4月前
【Azure Logic App】使用Outlook.com发送邮件遇到429报错
【Azure Logic App】使用Outlook.com发送邮件遇到429报错
|
4月前
|
Java 容器
【Azure Function App】Java Function在运行中遇见内存不足的错误
【Azure Function App】Java Function在运行中遇见内存不足的错误
|
4月前
|
开发工具 git
【Azure App Service】App Service设置访问限制后,使用git clone代码库出现403报错
【Azure App Service】App Service设置访问限制后,使用git clone代码库出现403报错

热门文章

最新文章