vue别名@

vite+ts项目配置@别名

vite.config.ts

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import { resolve } from 'path'
 
export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 路径别名
    },
    extensions: ['.js', '.json', '.ts', '.vue'] // 使用路径别名时想要省略的后缀名，可以自己 增减
  }
})

这里可能会没有path需要进行node配置安装

npm install --save-dev @types/node

vite-env.d.ts

/// <reference types="vite/client" />
declare module '*.vue' {
    import { DefineComponent } from "vue"
    const component: DefineComponent<{}, {}, any>
    export default component
  }

tsconfig.json

这里一般的vue项目是没有问题的，但是vite项目请看注意事项

{
  "compilerOptions": {
    "baseUrl": ".",
    // 用于设置解析非相对模块名称的基本目录，相对模块不会受到baseUrl的影响
    "paths": {

      // 用于设置模块名到基于baseUrl的路径映射
      "@/*": [
        "src/*"
      ]
    }
  }
}

注意事项

先一句话说明问题，路径别名要分别配置在vite和ts中，vite照着网上的教程配置就好。
ts部分，网上都说在tsconfig.json文件中配置，但是想要正常使用路径别名，配置必须放在tsconfig.app.json文件里面
—————————————————————————————
使用vite创建基于vue+ts模板生成的项目文件，根目录下会存在tsconfig.json、tsconfig.app.json、tsconfig.node.json三个ts配置文件。

根据网上说法，据说在vite3以后，引进了references属性，可以根据环境使用不同的配置，app文件是angular专用的ts配置文件，node是node环境使用，最后tsconfig.json会引用这两份配置。

但是我自己实测，把路径别名配置放tsconfig.json里面，ts无法正常解析@路径，只能放在tsconfig.app.json里面。

猜测tsconfig.app.json是用于所有web环境的配置文件，为什么tsconfig.json配置却不能生效，实在很难理解，按理说这是一个层级配置关系，tsconfig.json里面的配置应该作为最终确定才对。

————————————————————————————————