Vue 【vite使用alias】

前言

这是一个比较常用，且配置简单的功能。但是在不同环境下还是有点点小坑，这边就当是一个全面的记录吧。
vite中配置alias总共需要配置两个地方

• vite.config.ts：让代码编译通过
• tsconfig.json：让代码编辑器语法验证通过

一、vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.join(__dirname, "./src/"),
    },
  },
});

如果你的项目引入path报错，则需要下载

npm i @types/node

二、tsconfig.json

{
   ...其他代码
	
  "compilerOptions": {
    // 路径
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
}

三、可能遇到的问题

1. 配置后vscode仍然报语法提示错误，但是项目编译通过。
   解决办法：重启vscode
2. vscode语法提示通过，项目不通过
   解决办法：vite.config.ts中alias配置指定的地址如"@": path.join(__dirname, "./src/"),要使用path.join方法处理，用相对路径的话，在编译时可能文件处于的路径会改变。