Visual Studio Сode 在绝对路径中看不到波形符 (~)

Question

我部署了一个项目，并且从根目录导入了很多文件。这里它们的实现是这样的：

import { Link, Router } from "~/routes";

但是 VSC 看不到波浪号，也无法访问文件。如果我将“~”替换为“@”，问题就解决了。但我无法进行一千次这样的改变：

import { Link, Router } from "@/routes";

如何让 VSC 像“@”一样对“~”做出反应并导入文件？

Answer 1

尝试更新 webpack 配置，这就是

角色的工作方式

const path = require('path');
module.exports = {
  resolve: {
    alias: {
      '~': path.resolve(__dirname, 'src/')
    }
  }
};

Answer 2

您需要在 VS Code 中的

settings.json

的根目录中添加以下行：

"javascript.preferences.importModuleSpecifier": "non-relative",

将鼠标悬停在此配置上，您将获得工具提示： 首选基于 jsconfig.json / tsconfig.json 中配置的 baseUrl 或路径的非相对导入。

因此请确保将其也添加到您的

tsconfig.json

或

jsconfig.json

中。例如：

{
  ...
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths": {
      "~/*": ["src/*"],
    },
  },
}

Answer 3

当你使用webpack时，你可以按照以下方法：

另一种方式：