Vue.Js:别名配置

Question

我正在尝试在我的 Vue.js 项目中使用 jsconfig.json 为 components 和 sub-directories 创建别名。但是我收到了这个错误:

jsconfig.json

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@components/*": [
                "./src/components/*"
            ],
        }
    },
    "exclude": [
        "node_modules"
    ]
}

一些文件.vue

import GuestLayout from '@components/Layouts/GuestLayout';

错误:

ERROR  Failed to compile with 1 error

...

To install it, you can run: npm install --save @components/Layouts/GuestLayout

我尝试用眼镜解决这个问题，但似乎没有任何效果。这是找到的最简单的https://www.youtube.com/watch?v=U73TDohXmhQ

我在这里做错了什么......？

Answer 1

✔ 解决的问题:

对我有用的是在 vue.config.js 中设置配置，而不是使用 jsconfig.json 或 tsconfig。 json.

vue.config.js

const path = require('path');

module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
                '@Layouts': path.resolve(__dirname, 'src/components/Layouts/'),
                '@Inputs': path.resolve(__dirname, 'src/components/Input/'),
                '@': path.resolve(__dirname, 'src/components/'),
            }
        }
    }
}

一些文件.vue

import GuestLayout from '@Layouts/GuestLayout';
import FormGroup from '@Inputs/FormGroup';
...