`Vue3 - Vite`项目别名src到@不工作

Question

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?

Answer 1

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'),
    },
  }
})

Answer 2

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>

Answer 3

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/*"]
    }
  }
}

Vote up people below too except answer of question creator please. He copy paste answer form person who helped him in same day he asked question.

Answer 4

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, eg:

import foo from '/@foo'

Answer 5

Here's what worked for me...

import vue from '@vitejs/plugin-vue'
const path = require('path')

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

Answer 6

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"),
    },
  },
});

Answer 7

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, '...') },
   ]
}

Answer 8

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(ie 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>

Answer 9

In my blog post i describe how to configure this with Vite, TypeScript and Jest: https://divotion.com/blog/how-to-configure-import-aliases-in-vite-typescript-and-jest . For Vite change the vite.config.ts file to:

// vite.config.ts
import { defineConfig } from "vite";
import path from "path";

export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

Answer 10

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,
                },
            },
        }),
    ],
});