路径别名在 vue 脚本块中不起作用

Question

我正在尝试完全理解 Vue 和 Vite 的路径别名。

在 <script> 块之外（例如 <style> 和 <template> 或其他 .js 文件）具有 ~ 或 @ 别名的绝对路径，获取根目录正在工作。但是在内部我仍然需要使用 ../../../ 来回到根目录。如果我尝试使用 ~ 或 @，我会收到找不到文件的错误消息。

在那种情况下，@ 和 ~ 也不会做同样的事情吗？

编辑：

// 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';

Answer 1

对 vite.config.js 进行适当的更改。在本地测试了这个并且它解决了它。如果您也想使用它，请添加“~”。

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

本文来源：https://vueschool.io/articles/vuejs-tutorials/import-aliases-in-vite/

路径别名在 vue 脚本块中不起作用

Path aliases not working in vue script block

vue.js

vite