在vue2+js+vue/cli的项目中，我们使用了一个插件Path Intellisense用于便捷的指定路径名，但是同样的方法并不适用于vite里面，参阅文档后进行整理

vue2+js+vue/cli 的‘@’符号路径简写配置

第一种使用插件的用法

步骤：

• 安装vscode插件 Path Intellisense
• 在vscode的设置中，找到setting.json文件，新增以下配置

 "path-intellisense.mappings": {
        "@": "${workspaceRoot}/src"
  }

• 在项目根目录下新建配置文件jsconfig.json，进行以下配置

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs",
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./",
        "paths": {
          "@/*": ["src/*"]
        }
    },
    "exclude": [
        "node_modules"
    ]
}

• 配置好之后重启项目，重启项目一定要在根目录打开vscode
• 配置完成之后的效果就是在导入任意文件的时候可以使用@符号代表根目录的src/的路径效果

第二种不使用插件

• 找到vue.config.js文件，使用node.js自带的path，配置如下

const path = require('path');//引入path模块
function resolve(dir){
    return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径
}


module.exports={
   
    chainWebpack:(config)=>{
        config.resolve.alias
        .set('@',resolve('./src'))
        .set('components',resolve('./src/components'))
        //set第一个参数：设置的别名，第二个参数：设置的路径
　　　　
    }
}

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')
      }
    ]
  }
})

• 问题1：如果是TypeScript项目编写，还要修改一下TypeScript的配置。找到ts.config.json文件，进行以下配置：

{
    "compilerOptions": {
        "target": "esnext",
        "useDefineForClassFields": true,
        "module": "esnext",
        "moduleResolution": "node",
        "strict": true,
        "jsx": "preserve",
        "sourceMap": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "lib": ["esnext", "dom"],
        // 路径配置
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"]
        }
    },
    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
    "exclude": ["node_modules"],
    "references": [{ "path": "./tsconfig.node.json" }]
}

• 问题2：vite1跟vite2版本不一样，如果是vite1的，那么要把外面的 resolve 取消掉，然后这里的__dirname就是绝对路径呗，也行吧

export default {
	alias: {
   		 '/@/': resolve(__dirname, 'src'),
    },
}

• 问题3：如果是刚创建的TypeScript项目，有可能会出现 找不到模块“path”或其相应的类型声明 的错误提示，那么需要安装@type/node

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