vite vue3 @无效的问题？

Question

对@进行了设置，没问题呀，怎么还是提示不存在？

arr.map(item=>{
    //纹理加载
    let texture=new THREE.TextureLoader().load("@/assets/room/"+item+'.png')
    // 创建材质
    boxMaterial.push(new THREE.MeshBasicMaterial({map:texture}))
  })

tsconfig.json

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },

  "references": [
    {
      "path": "./tsconfig.config.json"
    }
  ]
}

Answer 1

vite默认是不支持@的
需要单独配置:
在vite.config.js中配置

import { resolve } from "path"

export default defineConfig({
  plugins: [vue()],
  // 配置根路径
  resolve: {
    // ↓路径别名，主要是这部分
    alias: {
      "@": resolve(__dirname, "./src")
    }
  }
})

如果在ts中使用可能会报错：

解决方案：npm install --save-dev @types/node

Answer 2

在使用别名（Alias）之后，需要在 tsconfig.json 中进行相应的配置

Answer 3

你加载图片是threejs的方法，它内部没有做别名处理的，vite只针对你模版和css以及js中import的别名加载方式，你这种方式并不经过vite处理