Vue3 项目实例（二）vite.config.ts的配置与axios安装

一、vite.config.ts的配置

1、对相对路径的处理（@）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// vite 提供node核心对象path
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 解析
  resolve:{
    // 别名
    alias:{
      // 映射关系
      '@':path.resolve('./src') // 相对路径转化绝对路径
    }
  }
})

注意：path模块找不到查看是否安装@type/node,快速修复安装

同时 ts.config.json中加入一下代码

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": [
      "ESNext",
      "DOM"
    ],
    "skipLibCheck": true,
    "noEmit": true,
    // 添加这里
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },


  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

2、端口号的导出更改 

 --host 更改 

proxy:{
      'api':{
        target:'http://.../api'
      }
    }

3、代理设置

proxy:{
      'api':{
        target:'http://.../api'
      }
    }

更改后文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// vite 提供node核心对象path
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server:{
    open:true,
    host:true,
    proxy:{
      'api':{
        target:'http://.../api'
      }
    }
  },
  // 解析
  resolve:{
    // 别名
    alias:{
      // 映射关系
      '@':path.resolve('./src') // 相对路径转化绝对路径
    }
  }
})

二、axios 安装

yarn add axios -S