import Component from '@/components/component'
在我看的代码中,../
的行为类似于相对于文件路径向上跳一级目录,但我想更加了解它的一般性作用。不幸的是,由于符号搜索问题,我找不到任何在线文档。import Component from '@/components/component'
在我看的代码中,../
的行为类似于相对于文件路径向上跳一级目录,但我想更加了解它的一般性作用。不幸的是,由于符号搜索问题,我找不到任何在线文档。import Component from '../../../../components/component'
这样的代码。
编辑:它存在的一个原因是因为import Component from 'components/component'
不会这样做,而是在node_modules
文件夹中搜索。'@*': ['client/src/*']
只取 @
后面的部分,这样我就可以使用 import X from '@components/x
并且它会正确地尝试访问 client/src/components/x
吗?在 tsconfig.json 中,TS + VSCode 已经允许以这种确切的形式进行操作,但是 webpack 报错 Can't resolve '@components/x' in 'client/src/'
。当我将其更改为您的解决方案并将导入路径更改为 import X from '@/components/x'
时,它立即开始工作,因此路径本来就是正确的。 - Qwerty为了使Ben的回答更加全面:
首先,您需要将babel-plugin-root-import
添加到您的devDependencies
中,添加到package.json
文件中(如果使用yarn
: yarn add babel-plugin-root-import --dev
)。
然后在您的.babelrc
文件中,将以下代码添加到plugins
键:
"plugins": [
[
"babel-plugin-root-import",
{
"rootPathPrefix": "@"
}
]
]
现在,您可以使用@
。例如:
不需要再使用
import xx from '../../utils/somefile'
而是可以使用
import xx from '@/utils/somefile'
如上所述,此功能不是 JS 中默认的。您需要使用 Babel 插件才能享受此功能。它的工作很简单。它允许您为 JS 文件指定默认根源,并帮助您将文件导入映射到该根源。 要开始安装,请通过 npm 安装:
如上所述,此功能不是 JS 中默认的。您需要使用 Babel 插件才能享受此功能。它的工作很简单。它允许您为 JS 文件指定默认根源,并帮助您将文件导入映射到该根源。 要开始安装,请通过 npm 安装:
npm install babel-plugin-root-import --save-dev
或者yarn add babel-plugin-root-import --dev
在您的应用程序根目录下创建一个.babelrc
文件,并按照您的喜好配置以下设置:
{
"plugins": [
["babel-plugin-root-import", {
"rootPathSuffix": "the-preferred/root/of-all-your/js/files",
"rootPathPrefix": "@"
}]
]
}
使用上述配置,您可以像这样简单地从该源进行导入:
import Myfile from "@/Myfile"
不用做所有这些花哨的东西:
"/../../../Myfile"
请注意,如果你喜欢的话,也可以将符号更改为任何符号,例如"~"
。
我正在使用VS Code构建React Native应用。
你需要做的是:
{
"compilerOptions": {
"baseUrl": ".",
"target": "ES6",
"module": "commonjs",
"paths": {
"@/*": ["src/*"],
"@components/*": ["src/components/*"],
"@core/*": ["src/core/*"]
}
},
"exclude": ["node_modules"]
}
基本上像"快捷方式":["绝对路径"]
如果你正在使用Typescript,你可以通过这样简单地使用你的tsconfig.json
来实现:
{
"compilerOptions": {
...
"baseUrl": ".",
"paths": {
"@lib/*": ["app/lib/*"]
}
},
}
// @
是对/src
的别名。
受Can Rau的回答启发,我在src/views/Home.vue
文件中做出了类似的发现。这个文件是使用最新版本(2021年7月,Ubuntu 20.04)创建的:npx @vue/cli create myfirstvue --default
。
我“推断”它是/src
,但想知道为什么,因为Ben的已接受的答案说它将是我的项目根目录,实际上是父目录,/src
是其子目录。
下面是Home.vue的内容:
...
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
</script>
这是由Vue Webpack模板定义的,我从此问题的另一个SO答案中学到。