tsx + vite 识别别名@问题解决

项目背景

用的是tsx + vite + vue3

vite别名配置

• vite.config.ts

resolve: {
  alias: {
    // @ts-ignore
    "@": path.resolve(__dirname, "src"),
    "~@": path.resolve(__dirname, "src"), // css内使用
  },
},

1、tsx文件内识别不了别名@

• 解决方案 配置tsconfig.json的 paths

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

2、@别名识别资源404解决方案

alias@别名在template模板语法中是没问题的，可以识别，但是在tsx就不能识别

问题

setup() {
  return ()=> (
    <div>
      <img src="@/assets/vue.svg" alt=""/>
    </div>
  )
},

• 我们可以看到 html内并没有解析别名

解决-1

利用new URL(url, import.​meta.url)

const getAssetPath = (fileName: string) => {
  return new URL(`../assets/${fileName}`, import.meta.url).href //具体的相对路径
}
// 使用
<img src={getAssetPath('vue.svg')} alt=""/>

• 解析地址

解决-2

• 直接导入

import imgPath from '@/assets/vue.svg'
  setup() {
    return ()=> (
      <div>
        <img src={ imgPath } alt=""/>
      </div>
    )
  },

3、css内使用

background: url("~@/assets/vue.svg") no-repeat 100% 100%;
background-size: cover;