Vue设置路径别名@

在需要引用距离比较远的文件的时候，防止出现 ../../../...这种代码，使用路径别名 @/...直接定位到src目录下明显更为方便简洁

记录一下使用方法

  1. 导包

    1
    npm i @types/node -D

  2. 修改 vite.config.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    //引入
    import { resolve } from 'path'

    // https://vitejs.dev/config/
    export default defineConfig({
      //设置路径
      resolve: {
        alias: {
          '@': resolve(__dirname, 'src'),
        },
      },
      plugins: [
        vue()
      ],
    })

  3. 配置 jsonconfig.json

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    {
        "compilerOptions": {
            "baseUrl": "./",
            "paths": {
                "@/*":[
                    "src/*"
                ]
            }
        }
    }

  4. 启动项目

大功告成