vite+vue3+TypeScript 易出现的问题

赠：创建项目

npm create vite@latest
Project name: » vite_test
//安装scss依赖
npm add -D sass
//安装声明文件包
npm i --save-dev @types/node
//安装路由
npm install vue-router@4

1、引入路径，代码报红，解决方案

找到 vite-env.d.ts 文件

//vite-env.d.ts
1.  declare module "*.vue" {
1.  import { DefineComponent } from "vue"
1.  const component: DefineComponent<{}, {}, any>
1.  export default component
1.  }

2、启动后提示“Network: use `--host` to expose“，无法通过网络IP访问服务

找到 vite.config.ts 文件,添加以下代码

server: {             
    host: '0.0.0.0',  //通过网络IP访问服务
    // port: 8080,      
    open: true
  },

这样就解决啦~~

3、npm run buid打包报错，解决方案

找到 package.json 文件，去掉这个就好啦

4、打包后白屏，解决方案

4.1、线上白屏：

方案1：
vite.config.ts文件中添加base

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  //解决“vite use `--host` to expose”
  base: './',	//不加打包后白屏
  resolve:{   
    //别名配置，引用src路径下的东西可以通过@如：import Layout from '@/layout/index.vue'
    alias:[   
      {
        find:'@',
        replacement:resolve(__dirname,'src') 
      }
    ]
  },
  
})

方案2：
检查路由模式：路由配置的是history模式,改为hash模式
router->index.ts文件中

4.2、想打开本地白屏文件：

在dist->index.html文件中 右击

安装地址：

5、调接口返回res报红，解决方案

错误提示：
# ts：Property ‘code‘ does not exist on type ‘AxiosResponse＜any＞‘.Vetur(2339)
类型“AxiosResponse”上不存在属性“errorinfo”。 utils->axios.ts文件中添加

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

// 处理  类型“AxiosResponse<any, any>”上不存在属性“errorinfo”。ts(2339)
declare module "axios" {
  interface AxiosResponse<T = any> {
    errorinfo: null;
    // 这里追加你的参数
    code:null;
  }
  export function create(config?: AxiosRequestConfig): AxiosInstance;
}

或者，在接口封装中加这段代码。

declare module 'axios' {
  export interface AxiosInstance {
    <T = any>(config: AxiosRequestConfig): Promise<T>;
    request<T = any> (config: AxiosRequestConfig): Promise<T>;
    get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
    delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
    head<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
    post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
    put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
    patch<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
  }
}

（这两种方式也是在网上看到的的办法，目前是解决了问题，如果有更好的方法欢迎评论）