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()],
},
},
};
});
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>;
}
}