vue3+ts+vite 路径别名配置

找vite.config.js.ts文件,进行配置.路径别名如果是单个的话,alias后面写对象,多个的话写数组,里面再放对象.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve('./src')
      }
    ]
  },
  base:'./',  //设置打包路径
  // server: {
  //     host: "localhost",
  //     port: 3000,
  //     https: true
  // },
})

如果使用typeScript编写的,还需要修改typeScript的配置,找到tsconfig.json文件,进行配置

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    // 路径配置
    "baseUrl": ".",
    "paths": {
        "@/*": ["src/*"]
    },
    "lib": [
      "ESNext",
      "DOM"
    ],
    "skipLibCheck": true,
    "types": [
      "element-plus/global"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "exclude": [
    "node_modules"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

如果是刚创建的typeScript项目,会出现报错提示"找不到模块path或相应的类型声明",所以需要安装@type/node

yarn add @type/node 或者
npm i @type/node