uniapp ts vue3封装baseUrl

您可以在 `src` 目录下创建一个 `config` 文件夹，并在其中创建 `index.ts` 文件，将以下代码添加到文件中：

// src/config/index.ts

const BASE_URL = 'http://your-base-url.com'

export default {
  BASE_URL
}

然后，在您的 `main.ts` 文件中引入该文件，并将其挂载到 Vue 实例上：

// main.ts

import { createApp } from 'vue'
import App from './App.vue'
import config from './config'

const app = createApp(App)

app.config.globalProperties.$config = config

app.mount('#app')

现在，您可以在任何组件中使用 `this.$config.BASE_URL` 访问基础 URL。

相关问题

uniapp ts vue3封装请求

以下是一个基于uniapp、typescript和vue3的封装请求的示例：

1. 安装axios和qs：

npm install axios qs --save

2. 创建一个request.ts文件，用于封装请求：

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
import qs from 'qs';

// 创建一个axios实例
const instance: AxiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
});

// 请求拦截器
instance.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // 在请求发送之前做些什么
    // 添加token等
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response: AxiosResponse) => {
    // 对响应数据做些什么
    return response;
  },
  (error) => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

// 封装请求方法
const request = {
  get(url: string, params?: any) {
    return instance.get(url, { params });
  },
  post(url: string, data?: any) {
    return instance.post(url, qs.stringify(data));
  },
  put(url: string, data?: any) {
    return instance.put(url, qs.stringify(data));
  },
  delete(url: string, params?: any) {
    return instance.delete(url, { params });
  }
};

export default request;

3. 在需要使用请求的组件中引入request.ts，并发送请求：

import request from '@/utils/request';

export default {
  methods: {
    async fetchData() {
      try {
        const response = await request.get('/data', { page: 1, limit: 10 });
        console.log(response.data);
      } catch (error) {
        console.log(error);
      }
    }
  }
};

这样就完成了一个简单的请求封装。你可以根据自己的需求进行修改和扩展。

uniapp ts vue3封装请求拦截

好的，关于uniapp ts vue3封装请求拦截，你可以按照以下步骤进行：

1. 在src目录下创建一个utils文件夹，并在该文件夹下创建一个request.ts文件，用于封装请求拦截器。

2. 在request.ts文件中引入axios和qs，并创建一个axios实例，具体代码如下：

import axios from 'axios';
import qs from 'qs';

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 后端接口地址
  timeout: 5000 // 请求超时时间
});

service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    if (config.method === 'post') {
      config.data = qs.stringify(config.data);
    }
    return config;
  },
  error => {
    // 对请求错误做些什么
    console.log(error); // for debug
    return Promise.reject(error);
  }
);

service.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response.data;
  },
  error => {
    // 对响应错误做点什么
    console.log('err' + error); // for debug
    return Promise.reject(error);
  }
);

export default service;

3. 在需要使用请求拦截器的页面中，引入刚才创建的request.ts文件，并使用相关方法进行请求，具体代码如下：

import request from '@/utils/request';

export function login(data: any) {
  return request({
    url: '/user/login',
    method: 'post',
    data
  });
}

这样就完成了uniapp ts vue3封装请求拦截的过程。