vue3 中配置 `@/` 路径

vue3 中配置 @/ 路径

在 Vue3 + Vite + JS 的项目中

在vite.config.js中如下配置即可:

export default defineConfig({
  ...
  resolve:{
    // 别名配置
    alias:{
      "@": path.resolve(__dirname, './src')
    }
  }
    
})

在Vue3 + Vite + TS的项目中

需要在 vite.config.ts 和 tsconfig.json里都有配置，如下：

vite.config.ts

export default defineConfig({
  ...
  resolve:{
    // 别名配置
    alias:{
      "@": path.resolve(__dirname, './src')
    }
  }
    
})

tsconfig.json ：

{
  "compilerOptions": {
  	...
    // @ 别名配置 路径提示
    "baseUrl": "./",
    "paths": {
      "@/*":[
        "src/*", // 如果有红色波浪线提示 则配置为 "./src/*"
      ]
    }
  },
  ...
}