首页 > 其他分享 >VUE中定义全局配置方法

VUE中定义全局配置方法

时间:2023-07-10 10:22:43浏览次数:28  
标签:VUE const 定义 wsapi appConfig args 全局 config

方法一:

main.ts中

const wsapi = "ws://localhost:8081";
const appConfig = {
  wsapi,
};

const app = createApp(App);

// Provide the appConfig as a global property
app.config.globalProperties.$appConfig = appConfig;
app.use(store)

VUE中

1、setup方法中

const $appConfig = instance.appContext.config.globalProperties.$appConfig;
console.log($appConfig.wsapi); // Access the wsapi variable
2、mounted中
mounted(){
	console.log(this.$appConfig.wsapi); // Access the wsapi variable
	const wsapi = this.$appConfig.wsapi;
},

方法二:

Vue.config.js

const { defineConfig } = require('@vue/cli-service');
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');

module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: (config) => {
    // Define wsapi as a global variable
    config.plugin('define').tap((args) => {
      args[0]['process.env'].wsapi = JSON.stringify('ws://localhost:8081');
      return args;
    });
  },
});

VUE中

setup方法直接使用

console.log("processwsapi"+process.env.wsapi)

标签:VUE,const,定义,wsapi,appConfig,args,全局,config
From: https://www.cnblogs.com/zhaogaojian/p/17540152.html

相关文章

  • vue实例
    <!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Vue测试实例</title><scriptsrc="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script></head><body><divid=......
  • elementui el-draw自定义拖拽指令
    一、问题引入场景:el-draw抽屉高度(宽度)可拖拽二、解决方案使用vue指令,el-draw打开后,插入一个元素,绑定鼠标事件实现拖拽主要代码如下/***el-drawer拖拽高度指令*/Vue.directive('el-drawer-drag-height',{bind(el,binding,vnode,oldVnode){......
  • vue--day13--watch与computed的区别
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>watch实现名字案例</title><scri......
  • Spring Cloud Gateway 设置全局接口访问日志
    SpringCloudGateway设置全局接口访问日志虽然网关只做转发,但是对于每个转发的请求,我们都希望能够在日志中打印出请求的信息,网上版本很多,踩了很多坑,目前没找到完美的解决方案,最后我这个应该是大成版。希望对大家有用。先贴代码,再说遇到什么坑吧。/***@authorchenzhangx*@d......
  • PostgreSQL-用户定义的函数
    PostgreSQL-用户定义的函数PostgreSQL是可扩展的,PostgreSQL服务器能够通过动态载入把用户编写的代码结合到自身中。也就是用户能够指定一个实现了新类型或函数的对象代码文件,并且PostgreSQL按要求载入它。主要讲的是查询语言函数与过程语言函数中的PL/pgSQL(SQL过程语言),其他......
  • vue--day12--深度监视
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>天气案例--监听属性</title><scrip......
  • vue-day12--监听属性
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>天气案例--监听属性</title><scrip......
  • vue--day11--计算属性实现名字案例简写
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>计算属性实现名字案例简写</title><scr......
  • vuex
    1.概念在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。2.何时使用?多个组件需要共享数据时3.搭建vuex环境1、创建文件:src/store/index.js//引入Vue核心库importVuefr......
  • vue--day11--计算属性实现名字案例
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>计算属性实现名字案例</title><scrip......