Vite/Vue 配置路径别名 @表示根路径，点击实现快捷跳转

配置别名路径在.vue文件中点击下方路径可跳转至对应文件中：

 1.如果使用Vue :  在vue.config.js文件中进行如下配置：

const path = require('path')
 
function resolve(dir) {
  return path.join(__dirname, dir)
}
 
module.exports = {
  
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  }
}

如果使用Vite :  在vite.config.js文件中进行如下配置：

import path from 'path'

export default defineConfig(() => {
   resolve: {

      alias: {
        // 设置路径 这里resolve和join可自行选用
        '~': path.resolve(__dirname, './'),
        // 设置别名
        '@': path.resolve(__dirname, './src')
      },

  extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
  },
}

2.在Vite/Vue根路径下增加jsconfig.json文件(如果用的是ts就在tsconfig.json中加)，文件内容如下：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "~/*": ["./*"]
    }
  }
}