`Vue3 - Vite` project alias src to @ not working

user_14241212 0
Viewed 51925

I have installed the project with vue3 - vite importing a component like

import Component from '../../../../components/Component.vue'

i just want to alias the src folder and do

import Component from '@/components/Component.vue'

this is my vite.config.js

import vue from '@vitejs/plugin-vue'

/**
 * https://vitejs.dev/config/
 * @type {import('vite').UserConfig}
 */
export default {
    plugins: [
        vue({
            template: {
                compilerOptions: {
                    // ...
                }
            }
        })
    ]
}

am i missing something? what else should i do?

vite vuejs3 vue.js javascript
9 Answers

In the vite.config.js file write the below code blocks

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  }
})
user_30309770

Update 2022

This solution comes by default from when creating a new project with npm init vue@latest

import { fileURLToPath, URL } from "url";

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

In components use @/:

<script setup>
import HelloWorld from "@/components/HelloWorld.vue";
</script>

This is what worked for me:

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

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

Then in components:

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>
user_63851840

Vue 3 Vite TypeScript

vite.config.ts

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  }
})

To remove warnings and add hint to downloads with @/

tsconfig.json

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

Unlike webpack, Vite doesn't have @ aliased to src by default. There is discussion of this at the following issue: https://github.com/vitejs/vite/issues/279

Ultimately you need to create an alias:

// vite.config.js 
module.exports = {
  alias: {
    '/@': path.resolve(__dirname, './src')
  }
}

// Your config 
export default {
  alias: {
    '/@': path.resolve(__dirname, './src')
  },
  plugins: [ ... ]
 }

Then you need to use /@ in your files, e.g.:

import foo from '/@foo'
user_92031100

I tried most of the above solutions and unfortunately did not work. The following did.

In my jsconfig.json

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

and in my vite.config.js

import { fileURLToPath } from "url";
import path from "path";

import { defineConfig } from "vite";

export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(path.dirname(fileURLToPath(import.meta.url)), "src"),
    },
  },
});
user_12326480

In my Vite 2.7.x

import vue from '@vitejs/plugin-vue'
import path from 'path'
 
...    
...
 resolve: {
   alias: [
      { find: '@', replacement: path.resolve(__dirname, './src') },
      { find: '...', replacement: path.resolve(__dirname, '...') },
      { find: '...', replacement: path.resolve(__dirname, '...') },
      { find: '...', replacement: path.resolve(__dirname, '...') },
   ]
}
user_5623660

Export path resolve function

Problrem

@/ alias doesn't work in :src dynamic attribure, so that you can't resolve asset file path dynamically.

Solution

  1. In the common ts code, define path resolve function(i.e. img()) using import.meta.url.
  2. Use img() in the vue script.

Files

/src
  /assets/img/
    logo.png
  Util.ts
  App.vue

Util.ts

export const srcRoot = import.meta.url;
export function img(name:string){
  return new URL(`./assets/img/${name}.png`, srcRoot)
}

App.vue

<script>
import {img} from "./Util";
</script>

<template>
<img  :src="img('logo')" />
</template>
user_89718170
user_57079070

This seems to work for me and is shorter:

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

export default defineConfig({
    resolve: {
        alias: {
            '@': path.resolve('./resources'),
        }
    },
    plugins: [
        laravel({
            input: 'resources/js/app.js',
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});
user_78265110
Related