webstorm在vite中识别@别名地址

效果

1、js中配置

1-1 新建webpack.config.js

• 内容

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, '.', dir)
}

module.exports = {
  context: path.resolve(__dirname, './'),
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src')
    }
  }
}

1-2 配置webstorm文件

2、 ts中配置别名路径识别

• 新建tsconfig.json

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

• 在vite.config.ts中

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: {
      '@': path.resolve(__dirname, 'src'),
    }
  },
})