Vue.Js：别名配置

Question

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

jsconfig.json

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

SomeFile.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/'),
            }
        }
    }
}

SomeFile.vue

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

Vue.Js：别名配置

Vue.Js: Alias configurations

alias

vue.js

vscode-jsconfig