Path aliases not working in vue script block-CodePudding

I'm trying to completely understand the path aliases with Vue and Vite.

Outside of the <script> block (e.g. <style> and <template> or other .js files) absolute paths with ~ or the @ alias, for getting the root directory are working. But inside I still need to use ../../../ for getting back to the root. If I try using ~ or @ I get errors for files not being found.

Also wouldn't @ and ~ do the same in that case?

EDIT:

// Somehow working cause it's no component but a mere .js file
import {
    filterwords
} from '@/services/signup/filterwords.js';

// Working
import passwordMeter from '../../utility/PasswordMeter.vue';
// Not working
import passwordMeter from '~/utility/PasswordMeter.vue';
import passwordMeter from '@/utility/PasswordMeter.vue';

CodePudding user response：

Do proper changes in vite.config.js. Tested this locally and it solves it. Add '~' if you also want to use that.

// 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()]
})

Credit to this article: https://vueschool.io/articles/vuejs-tutorials/import-aliases-in-vite/