设置vue项目运行后，自行打开浏览器。src起别名

1：设置vue项目运行后，自行打开浏览器

找到package.json配置文件

 2：src起别名，这样就可以直接找到文件路径，不需要../../的这些繁琐操作。意思直接使用@符号就代表src目录

1）：在vite.config.ts修改

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//引入node提供的内置模块path，可以获取绝对路径
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve:{
    alias:{
      '@':path.resolve(__dirname,'src') // 相对路径别名配置，使用 @ 代替 src
    }
  },
  //配置代理跨域
  server:{
    proxy:{
      '/api':{
        target: 'http://syt.atguigu.cn',
        changeOrigin: true,
        // rewrite: (path) => path.replace(/^\/api/, ''),
      }
    }
  }
})

2）：如果__dirname爆红，请安装@type/node(用于描述node.js核心模块和常用的第三方库的类型消息)

npm i @type/node --save-dev

3）：找到tsconfig.json，找到配置项compilerOptions添加配置，这一步的作用是让ide可以对路径进行智能提示

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": ".",// 解析非相对模块的基地址，默认是当前目录
    "paths": {//路径映射，相对于baseUrl
      "@/*": [
        "src/*"
      ]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}