Vue 中 app.config 相关配置项介绍与案例

于 2024-08-13 09:40:14 发布
阅读量1.1k 收藏 16
点赞数 15
分类专栏： Vue 3.0从入门到精通 文章标签： vue.js javascript 前端 errorHandler app.config warnHandler performance
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chinayun_6401/article/details/141152180
版权

目录

app.config

app.config.errorHandler

app.config.warnHandler

app.config.performance

app.config.compilerOptions

app.config.globalProperties

app.config.optionMergeStrategies

​​​​​​​app.config

        在 Vue 3.0 中，每个应用实例都会展现出一个 config 对象，该对象涵盖了针对此应用的配置设定。您能够在挂载应用之前对这些属性予以更改。app.config 主要用于对 Vue 应用的全局选项进行配置。借助它，能够设定一些全局的行为和特性，比如错误处理、警告处理以及性能优化选项等等。在 Vue 2.0 中，相对应的是 Vue.config ，其功能和使用方法与 app.config 相仿，同样是用于设置全局的配置选项。

        示例代码如下：

console.log(app.config);  

        运行结果：

app.config.errorHandler

        在 Vue 3 中，app.config.errorHandler 用于定义全局的错误处理函数。当应用中的组件在运行时发生错误时，这个错误处理函数会被调用。它接收三个参数：错误对象 err 、当前组件实例 vm 和错误信息字符串 info 。 在 Vue 2.0 中，对应的是 Vue.config.errorHandler ，功能和用法与 Vue 3 中的 app.config.errorHandler 类似。

        示例代码如下：

<body>  
    <div id="app"></div>  
</body>  
<script>  
    const { createApp,reactive} = Vue;  
    // 创建一个全局的共享数据对象  
    const sharedData = reactive({  
        componentName: '',  
        errorMessage: '',  
        errorInfo: ''  
    });  
    const rootComponent = {  
        name:'componentName',  
        template: `  
            <div>  
                <p>Error in component:{
  { sharedData.componentName }}</p>  
                <p>Error message:{
  { sharedData.errorMessage }}</p>  
                <p>Error info:{
  { sharedData.errorInfo }}</p>  
            </div>  
        `,  
        methods: {  
            // 故意引发错误的方法:调用不存在的方法  
            errorMethod() {  
                this.nonExistentMethod();   
            }  
        },  
        mounted(){  
            this.errorMethod();  
        },  
        inject:['sharedData']  
    };  
    const app = createApp(rootComponent);  
    // 配置全局错误处理函数  
    app.config.errorHandler = (err, instance, info) => {  
        sharedData.componentName = instance.$options.name;  
        sharedData.errorMessage &#
最低0.47元/天 解锁文章
前端基地
关注
  • 15
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue 3之app.config.globalProperties的使用，ctx打包后指向错误
MZS_ym的博客
09-29 1万+
vue 3之app.config.globalProperties的使用 在main.js中配置app.config const app = createApp(App) app.config.globalProperties.http = () => { console.log('i am http') } app.use(store).use(router).use(Element3).mount('#app') 当我们想在组件内调用http时需要使用getCurrentInstance
App.config配置详解
mao_mao37的博客
09-11 9690
  转载地址：https://www.cnblogs.com/luna-hehe/p/9104748.html 经上一篇文章https://www.cnblogs.com/luna-hehe/p/9104701.html发现自己对配置文件很是不了解，同样还是查了半天终于发现另一片宝贵文档https://www.cnblogs.com/ysz12300/p/5509576.html  和 htt...
app.config
dongbi4991的博客
06-18 273
App.Config详解 应用程序配置文件是标准的 XML 文件，XML 标记和属性是区分大小写的。它是可以按需要更改的，开发人员可以使用配置文件来更改设置，而不必重编译应用程序。配置文件的根节点是configuration。我们经常访问的是appSettings，它是由.Net预定义配置节。我们经常使用的配置文件的架构是象下面的形式。先大概有个印象，通过后面的实例会有一个比较清楚...
Vue App.config
hhhhhjkhf的博客
03-15 276
【代码】Vue App.config。
vue app.config配置自定义错误捕捉、全局变量、自定义元素
weixin_43294560的博客
05-22 2003
const app = Vue.createApp({}) 1、处理组件渲染方法执行期间以及侦听器抛出的未捕获错误 app.config.errorHandler = (err, vm, info) => { // 处理错误 // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子 } 2、为Vue的运行时警告指定一个自定义处理函数,开发模式下有效 app.config.warnHandler = function(msg, vm, trace) { /
【Vue3.0】5、Application Config
马云
11-26 630
文章目录Application ConfigglobalPropertiesisCustomElementv3v2optionMergeStrategiesdirective传统的事件代理写法使用事件代理加自定义指令directive写法 Application Config globalProperties // main.js import * as utils from '/src/libs/utils' const app = Vue.createApp(); app.config.globalP
App.config
weixin_30549175的博客
10-20 124
在解决方案中增加一窗口选择xml文件，并将名称改为app.config.其内容设置如下： <?xml version="1.0" encoding="utf-8"?> <configuration> <appSettings> <add key="source" value="Server=localhost;uid=sa;pwd...
Vue CLI4 Vue.config.js标准配置(最全注释)
10-15
1. **publicPath**: 这个配置项决定了生成的静态资源在生产环境中相对于服务器的基础 URL。例如，如果设置为 `/site/vue-demo/`，那么所有资源链接将以此路径开头。 2. **indexPath**: 定义生成的 HTML 文件（默认...
vue项目中,main.js,App.vue,index.html的调用方法
10-17
在Vue项目中，main.js、App.vue和index.html是三个核心文件，它们在项目启动和运行过程中扮演着不同的角色。理解这三个文件的调用关系及其功能，对于掌握Vue项目结构和开发流程至关重要。 首先，main.js是整个Vue...
App.Config详解
11-26
这是一个对初步学习App.config配置文件的人来说是一个比较好的文档，
vue.config.js打包配置
老司机的后备箱
09-30 1222
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。有需要的小伙伴，可以点击下方卡片领取，无偿分享。
Vue 3.0 应用配置
2201_75866484的博客
03-27 616
config是一个包含了 Vue 应用全局配置的对象。
vue3.0全局变量app.config.globalProperties的使用
qq_42669897的博客
10-12 5606
app.config.globalProperties是一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。是Vue2中Vue.prototype使用的一种替代
C# 关于App.config
weixin_30527551的博客
07-26 438
App.config是winfrom等程序的应用程序配置文件，用来存放一些参数。 app.config只会在应用程序启动时加载一次。 当程序在运行中修改app.config中的参数是不会生效，必须要重启程序才会生效， 如果想要达到立即生效的效果，可以采用以下方法 1、新建config文件时，不要使用app作为config名字，然后使用config操作类来读取和写...
APP.Config配置文件
程金鹏（程利鹏）
09-30 5170
目录目录 背景 什么是配置文件 在哪里创建配置文件 connectionStrings 配置节 appSettings 配置节 读取与更新 appconfig 1 读取connectionStrings配置节 2 更新connectionStrings配置节 3 读取appStrings配置节 4 更新connectionStrings配置节背景　　最近在程序开发过程中总是用
自定义应用程序配置文件（app.config） (引用)
不想Coding的男人(本人已将blog地址移到 mixiaobo.cnblogs.com)
11-18 2194
自定义应用程序配置文件（app.config）  1.        配置文件概述： 应用程序配置文件是标准的 XML 文件，XML 标记和属性是区分大小写的。它是可以按需要更改的，开发人员可以使用配置文件来更改设置，而不必重编译应用程序。配置文件的根节点是configuration。我们经常访问的是appSettings，它是由.Net预定义配置节。我们经常使用的配置文件的架构是象下面的形式。先
App.config配置
sadikaqy的专栏
07-03 603
1. 向项目添加 App.config 文件：        右击项目名称，选择“添加”→“添加新建项”，在出现的“添加新项”对话框中，选择“添加应用程序配置文件”；如果项目以前没有配置文件，则默认的文件名称为 “App.config”，单击“确定”。出现在设计器视图中的 App.config 文件为： 2. connectionStrings 配置        3. appSettings
vue3 vue.config.js配置路径别名
最新发布
07-15
### 回答1： 在Vue.js 3中，我们可以使用vue.config.js文件来配置路径别名。路径别名可以让我们在导入模块时使用自定义的快捷方式。 首先，在项目的根目录下创建vue.config.js文件，如果该文件已存在可以跳过此步骤。 然后，打开vue.config.js文件，我们需要使用module.exports导出一个对象。具体的配置如下： module.exports = { configureWebpack: { resolve: { alias: { '@': path.resolve(__dirname, 'src') // 这里的'@'表示src目录的绝对路径 } } } } 在这个配置中，我们使用resolve.alias来配置路径别名。在这个例子中，我们将'@'符号配置为src目录的绝对路径，这样在代码中导入模块时，我们可以使用'@'符号来代替src目录的路径。 例如，如果我们有一个名为HelloWorld.vue的组件文件在src/components目录下，我们可以在其他组件中使用以下方式导入它： import HelloWorld from '@/components/HelloWorld' 这样，在代码中使用路径别名可以让我们更方便地引用和管理模块路径，提高开发效率。 ### 回答2： 在Vue3中，我们可以通过修改vue.config.js文件来配置路径别名。路径别名允许我们在引用文件时使用简短的别名而不是完整的路径。 首先，在项目根目录下创建一个vue.config.js文件。如果该文件已存在，则直接打开。 然后，在vue.config.js文件中添加以下代码： ``` const path = require('path'); module.exports = { configureWebpack: { resolve: { alias: { '@': path.resolve(__dirname, 'src'), // 添加其他路径别名 // 比如：'@components': path.resolve(__dirname, 'src/components') }, }, }, }; ``` 以上代码中，我们使用了Node.js的path模块来处理路径，我们先导入了path模块。 然后，在configureWebpack配置中，我们使用resolve对象来配置路径别名。alias字段表示路径别名，它是一个对象，包含我们定义的别名。 @代表src目录的路径。这样我们就可以在引用文件时使用@代替src，例如import App from '@/App'。 如果你还想添加其他路径别名，可以继续在alias对象中添加键值对。键表示别名，值表示目标路径。 最后，将上述代码保存并关闭vue.config.js文件。 现在，我们在Vue项目中就可以使用路径别名了。无论是在组件中还是在其他文件中引用，我们都可以使用别名来代替完整的路径，使代码更加简洁易读。 ### 回答3： 在Vue3中，我们可以通过配置vue.config.js文件来设置路径别名。 首先，我们需要在项目根目录下创建一个vue.config.js文件。如果该文件已存在，可以直接编辑它。 然后，在vue.config.js文件中添加如下代码： ```js const path = require('path'); module.exports = { chainWebpack: (config) => { config.resolve.alias .set('@', path.resolve(__dirname, 'src')) // 设置@别名，将src目录路径映射为@ .set('components', path.resolve(__dirname, 'src/components')) // 设置components别名，将src/components目录路径映射为components .set('views', path.resolve(__dirname, 'src/views')) // 设置views别名，将src/views目录路径映射为views // 可以继续设置其他路径别名 }, }; ``` 以上代码中，我们使用了Node.js的path模块来处理路径，需要先通过require引入。 然后，我们使用了chainWebpack配置项来进行路径别名的设置。其中，config.resolve.alias用于设置路径别名，set方法用于给别名起名，并传入对应的路径。 在上述代码中，我们添加了三个路径别名，分别是`@`、`components`和`views`。其中`@`代表项目根目录下的src目录，`components`代表src目录下的components目录，`views`代表src目录下的views目录。 你可以根据需要设置其他路径别名，只需修改set方法中的别名和路径即可。 配置完vue.config.js后，保存文件并重新运行项目，就可以在Vue组件中使用路径别名了。例如，要引入src目录下的一个组件，可以这样写：`import Example from '@/components/Example';`
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端基地

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值