Perhaps, 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!
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).vue
at the end© All rights reserved. Made with ❤️ by BitterBrains, Inc.