Import Aliases in Vite
source link: https://vueschool.io/articles/vuejs-tutorials/import-aliases-in-vite/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Import Aliases in Vite
Written by Daniel KellyPerhaps, you're moving from Vue CLI to Vite as your build tool of choice and in the process you realize that the @
alias no longer works .
This was exactly my experience, as well as my reaction. How in the world was I going to avoid such nasty looking imports as this ../../../someComponent.vue
?
After a bit of googling and tinkering I found that the solution is actually fairly straightforward.
Vite takes a resolve.alias
config option that it passes on to @rollup/plugin-alias
as it's entries option. All that's needed is to pass it an absolute path to the src
directory of our project.
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
resolve:{
alias:{
'@' : path.resolve(__dirname, './src')
},
},
plugins: [vue()]
})
Give your development command a restart and you should be off to the races!
Bonus Tips
As a bonus, here are a couple other things I've run into moving from Vue CLI to Vite, that I hope will save you a bit of time
require
won't work anymore for importing images (see docs for handling static assets in Vite)- when importing single file components you must include the
.vue
at the end
Article written by Daniel Kelly
Daniel is a full-time educator at Vue School and has a massive passion for Vue.js, Nuxt.js, and Laravel.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK