vue3项目中问题汇总（不定期更新）

1. vite+vue3解决项目中第三方包无法使用node模块问题

npm add node-stdlib-browser
npm add -D vite-plugin-node-stdlib-browser

// vite.config.js
// 方案1
import { defineConfig } from 'vite'
import nodePolyfills from 'vite-plugin-node-stdlib-browser'
export default defineConfig({
  plugins: [nodePolyfills()]
})

// 方案2
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import nodePolyfills from 'vite-plugin-node-stdlib-browser';
import commonjs from 'vite-plugin-commonjs';
import DefineOptions from 'unplugin-vue-define-options/vite';
import vueJsx from '@vitejs/plugin-vue-jsx';
import { esbuildCommonjs } from '@originjs/vite-plugin-commonjs';
// yarn add --dev @esbuild-plugins/node-modules-polyfill 这个包中包含了下方这个模块
import rollupNodePolyFill from 'rollup-plugin-node-polyfills';

export default defineConfig(({ mode }) => {
  // 加载模式变量
  const env = loadEnv(mode, 'src/config/env');
  return {
    define: {
      'process.env': {},
    },
    optimizeDeps: {
      esbuildOptions: {
        plugins: [esbuildCommonjs(['stream-browserify'])],
      },
    },
    plugins: [
      vue(),
      vueJsx({}),
      createSvgIconsPlugin({
        iconDirs: [resolve(__dirname, './src/icons')],
        symbolId: 'icon-[dir]-[name]',
        inject: 'body-last',
        customDomId: '__svg__icons__dom__',
      }),
      nodePolyfills(),
      commonjs(),
      DefineOptions(),
    ],

    resolve: {
      alias: {
        '@': resolve(__dirname, './src/'),
        'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
      },
      extensions: ['.ts', '.tsx', '.js', '.jsx', '.vue', '.json'],
    },
    server: {
      port: 3000,
      strictPort: true,
      host: true,
      proxy: {
        '/api/': {
          secure: false,
          target: env.VITE_HOST,
        },
      },
    },
    build: {
      sourcemap: true,
      rollupOptions: {
        // 解决生产环境没有打包node模块的问题
        plugins: [rollupNodePolyFill()],
      },
    },
  };
});

npm地址

2. 在项目中如何修改axios返回数据ts类型

文件路径 /types/axios.d.ts

import 'axios';
// 后端返回接口数据类型，目前发现是这样的，根据实际需要做拓展
interface IResponse {
  code: number;
  data: any;
  msg: string;
  success: boolean;
}
declare module 'axios' {
  interface AxiosRequestConfig {
    meta?: {
      noNeedToken?: boolean; // 请求是否不需要token,例如登录接口
    };
  }
  /**
   * 说明：
   * 1. 默认request ，get，post方法中的第一个接口参数，表示请求返回数据类型，默认为IResponse，
   *    如果在接口中传入了参数，那么以传入的为准，如果没有传入，那么接口返回来的就是IResponse类型
   * 2. 第二个参数D = any表示默认参数类型为any，实际上就是调用实际接口时的参数类型，对数据返回影响不大，所以可以不传，
   * */
  export interface AxiosInstance {
    <T = IResponse, D = any>(config: AxiosRequestConfig<D>): Promise<T>;
    get<T = IResponse, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<T>;
    post<T = IResponse, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>): Promise<T>;
    // post(params: any): Promise<IResponse>;
  }
}