时间戳

首页 > 解决方案 > Vue.Js：别名配置

vue.js - Vue.Js：别名配置

问题描述

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

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

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

标签： vue.jsaliasvscode-jsconfig

解决方案

✔ 问题解决：

对我有用的是设置配置vue.config.js而不是使用jsconfig.jsonor 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';
...

推荐阅读