Partial functionality failure

[MyDataHouse]

In normal circumstances, it should be like this

"The cause of the malfunction is because I have a watch function in the login component."

"Commenting out the code for the selected range fixes everything."

[MyDataHouse]

I found that the issue is caused by my custom request implementation. Everything works fine with the original axios.

import axios from 'axios';
import { createDiscreteApi } from 'naive-ui';
import type { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError, InternalAxiosRequestConfig } from 'axios';

const { message: ElMessage } = createDiscreteApi(['message'], {
  messageProviderProps: { closable: true, keepAliveOnHover: true, duration: 5000, placement: 'bottom-right' }
});

export class Request {
  instance: AxiosInstance;
  baseConfig: AxiosRequestConfig = {
    baseURL: import.meta.env.VITE_BASE_API,
    timeout: 10000
  };
  constructor(config: AxiosRequestConfig) {
    this.instance = axios.create(Object.assign(this.baseConfig, config));

    this.instance.interceptors.request.use(
      (config: InternalAxiosRequestConfig) => {
        // config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
        config.headers['Accept'] =
          'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7';
        return config;
      },
      (err: AxiosError) => {
        return Promise.reject(err);
      }
    );

    this.instance.interceptors.response.use(
      (res: AxiosResponse) => {
        if (res.data.success) return res.data;
        return Promise.reject(res.data.message);
      },
      (error: AxiosError) => {
        // 处理 HTTP 网络错误
        let message = '';
        // HTTP 状态码
        const status = error.response?.status;
        switch (status) {
          case 401:
            message = 'token 失效，请重新登录';
            // 这里可以触发退出的 action
            break;
          case 403:
            message = '拒绝访问';
            break;
          case 404:
            message = '请求地址错误';
            break;
          case 500:
            message = '服务器故障';
            break;
          default:
            message = '网络连接故障';
        }

        ElMessage.error(message);
        return Promise.reject(error);
      }
    );
  }
  public req(config: AxiosRequestConfig): Promise<any> {
    return this.instance.request(config);
  }
}

export default new Request({});

Then I create interfaces in the API

import request from '@renderer/util/request';

export function getPublicKey(): Promise<{
  success: boolean;
  message: string;
  code: number;
  result: string;
  timestamp: number;
}> {
  return request.req({
    url: 'sso/api/get-key',
    method: 'get'
  });
}

Then, whenever I use this interface in any component, it causes vue-devtools to stop working.

[MyDataHouse]

When it stops working, it will generate a warning message.

[Vue warn]: The `compilerOptions` config option is only respected when using a build of Vue.js that includes the runtime compiler (aka "full build"). Since you are using the runtime-only build, `compilerOptions` must be passed to `@vue/compiler-dom` in the build setup instead.
- For vue-loader: pass it via vue-loader's `compilerOptions` loader option.
- For vue-cli: see https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader
- For vite: pass it via @vitejs/plugin-vue options. See https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue#example-for-passing-options-to-vuecompiler-sfc

[MyDataHouse]

"I found that the issue is caused by createDiscreteApi from native-ui. Using it results in Vue DevTools showing two apps: one where you can view components normally and one where you cannot."

[alexzhang1030]

It looks like you have two apps, you can switch vue app by clicking the vue logo on the top-left side.

[alexzhang1030]

I found that the issue is caused by my custom request implementation. Everything works fine with the original axios.

import axios from 'axios';
import { createDiscreteApi } from 'naive-ui';
import type { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError, InternalAxiosRequestConfig } from 'axios';

const { message: ElMessage } = createDiscreteApi(['message'], {
  messageProviderProps: { closable: true, keepAliveOnHover: true, duration: 5000, placement: 'bottom-right' }
});

export class Request {
  instance: AxiosInstance;
  baseConfig: AxiosRequestConfig = {
    baseURL: import.meta.env.VITE_BASE_API,
    timeout: 10000
  };
  constructor(config: AxiosRequestConfig) {
    this.instance = axios.create(Object.assign(this.baseConfig, config));

    this.instance.interceptors.request.use(
      (config: InternalAxiosRequestConfig) => {
        // config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
        config.headers['Accept'] =
          'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7';
        return config;
      },
      (err: AxiosError) => {
        return Promise.reject(err);
      }
    );

    this.instance.interceptors.response.use(
      (res: AxiosResponse) => {
        if (res.data.success) return res.data;
        return Promise.reject(res.data.message);
      },
      (error: AxiosError) => {
        // 处理 HTTP 网络错误
        let message = '';
        // HTTP 状态码
        const status = error.response?.status;
        switch (status) {
          case 401:
            message = 'token 失效，请重新登录';
            // 这里可以触发退出的 action
            break;
          case 403:
            message = '拒绝访问';
            break;
          case 404:
            message = '请求地址错误';
            break;
          case 500:
            message = '服务器故障';
            break;
          default:
            message = '网络连接故障';
        }

        ElMessage.error(message);
        return Promise.reject(error);
      }
    );
  }
  public req(config: AxiosRequestConfig): Promise<any> {
    return this.instance.request(config);
  }
}

export default new Request({});

Then I create interfaces in the API

import request from '@renderer/util/request';

export function getPublicKey(): Promise<{
  success: boolean;
  message: string;
  code: number;
  result: string;
  timestamp: number;
}> {
  return request.req({
    url: 'sso/api/get-key',
    method: 'get'
  });
}

Then, whenever I use this interface in any component, it causes vue-devtools to stop working.

I'm not sure what the root reason for this is, can you share a minimal reproduction?

[MyDataHouse]

The issue with switching between two apps was previously resolved. However, I don't think clicking the Vue logo to switch apps is a good idea, as I wasn't aware that the logo was clickable. You could refer to older browser plugins, which made it more obvious how to switch between different apps.

[MyDataHouse]

问题就是两个 apps 引起的，之前是我不知道怎么切换app , 现在已经没有这个问题了。我觉得点击 vuelogo 切换app不是一个好主意，我根本没有意识到这个logo可以点击。可以参考老的浏览器插件 很明显可以切换不同的app