axios

因为每一次请求需要携带请求token，为了方便想在请求头中携带token，按照之前在vue2+js中的写法，会报类型错误

(property) AxiosRequestConfi难破mg5g.headers?: AxiosRequestHeaders | undeAPPfined

解决方式：

// 覆盖axios ts对config.headers的类型限制
interface YXRequestConfig extends AxiosRequestConfig {
    headers?: any
}
// 请求拦截
axios.interceptors.request.use((config:YXRequestConfig)=>{
    // 设置请求头
    if(window.sessionStorage.getItem('token')){
        config.headers['token'] = window.sessionStorage.getItem('token');
    }else if(window.localStorage.getItem('token')){
        config.headers['token'] = window.localStorage.getItem('token');
    }
    nprogress.start()
    return config
},error=>{
    return Promise.reject(error);
})

vue-router

在定义routes数组时会报类型错误

解决方式：

import { RouteRecordRaw } from 'vue-router'
const routes:RouteRecordRaw[] = [....]
export default routes

require不支持的状况

ts可能会不兼容部分es6的新语法，所以如果要在ts中使变量名用es6的一些新语法，最好下载@types/node插件
npm i @types/node -D

配置环境变量

定义环境变量：

之前在vue-cli脚难破mg5日剧手架中，配置环境变变量是什么意思量，写在.env文件中，且以VUE_APP_开头即可，但是在vite项目中，需要变更为VITE_APP_开头的形式；

访问环境变量：

import.meta.env.变量名

挂载全局属性

之前在vue2中我们都是直接将需要全局使用的属性，添加到Vue的原型对象上，然后通过this.的方式去访问；
然而在vue3中却不能这么操作，如果我们需数组去重方法要在vue3的实例上，挂载变量，则需要使用以下的方式：

app.config.globalProperties.API = API // 将axios添加到vue实例上

访问方式：
因为在vue3中，我们的业务逻辑都在setup中，不再使用this,所以，访问vue挂载的变量的方式就变成以变量泵下形式：

const {appContext} = getCurrentInstance()
const {API} = appContext.config.globalProperties

我觉得这apple种方式又臭又长，还不如直接导入来的快，如果大家有更好的解决方式，请留言告诉我，谢谢。
另外，数组如果你的项目是ts的,上面代码会报类型变量与函数错误，解决方式如下：
创建一个hooksapplication文件夹，里面新建一个u男配每天都在体内成绩se***.ts的文件，这个文件名随意。在文件中下入如下代码

import { getCurrentInstance, ComponentInternalInstance } from 'vue'
export function useGlobalMmount(){
    const {appContext} = getCurrentInstance() as ComponentInternalInstance
    return appContext.config.globalProperties
}

其他文件中使用：

  import {useGlobalMmount} from '../hooks/usegetCurrentInstance'
  let {API} = useGlobalMmount();

element-plus主题变量名的命名规则定制

根据官方文档的教程，我的项目报错

./src/assets/style/element/index.scss (./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-3-1!./node_modules/postcss-loader/src??ref--9-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-3-3!./node_modules/style-resources-loader/lib??ref--9-oneOf-3-4!./src/assets/style/element/index.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: @forward rules must be written before any other rules.
  @forward 'element-plus/theme-chalk/src/common/var.scss' with (
   $colors: (
     'primary': (
       'base': #3F66D4,
     ),
   )
 );

我的解决方式： 在src下创建style>element>index.scss

注意如果想在vite中支持scss，你需要安装变量值sass
npm i sass -S
创建好后,index.scss中的代码如下：

$--colors: (
  "primary": (
    "base": rgb(250, 184, 2),
  ),
  "success": (
    "base": rgb(250, 184, 2),
  ),
  "warning": (
    "base": #f2711c,
  ),
  "danger": (
    "base": #db2828,
  ),
  "error": (
    "base": #db2828,
  ),
  "info": (
    "base": #42b8dd,
  ),
);
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: $--colors,
);
@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;

然数组公式后我们需要变量泵在vite.config.ts中做出如下配置 安装两个插件动态引入elNPMemeapplicationnt+的样式：
npm i unplugin-vue-components/vite unplugin-vue-components/reso女配每天都在为国争光lvers -D

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
    plugins: [
        vue(),
        Components({
          resolvers: [
            ElementPlusResolver({
              importStyle: 'sass',
            }),
          ],
        }),
      ],
      //css预处理
      css: {
            preprocessorOptions: {
            scss: {
                additionalData: '@use "./src/style/element/index.scss";'
                }
            }
        },
})

我们在这里已经全局使用了element定制的样式，所以在mai数组指针n.ts中，就不需要引入element的默认样式和自定义样式了

后续可能还会踩更多的坑，往后的坑就在这篇文章的基础上继续编辑更新，有更多好的建application议，请各位大axios和ajax区别佬在评论区指教。