【编码规范】简单两步，src目录配置@别名项目若不配置src的@别名，文件的引用可能会出现很多"../../..."的情

一、为什么要配置@别名

若不配置src的@别名，文件的引用可能会出现很多"../../..."的情况。

这不影响代码的运行，总感觉代码不够优雅，一眼看上去也无法准确的找到文件所在。

二、简单两步配置@别名

1、确定项目的打包工具是webpack还是vite -> 让打包工具“认识”@符号 -> 可正确编译@符号

如果是webpack打包工具，则在vue.config.js文件下，增加如下配置

import { defineConfig } from 'vite'
import path from 'path'

module.exports = defineConfig({
  devServer: {},
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      },
    }
  }
})

如果是vite打包工具，则在vite.config.js文件下，增加如下配置

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  server: {},
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

2、确定项目是否使用ts编写 -> 让ts“认识”@符号 -> 可获取代码输入提示

在项目的tsconfig.json，增加如下配置

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

简单两步，完成啦。