在导入路径中，@符号代表什么？

Question

在导入路径中，@符号代表什么？

430

我正在开始一个新的vue.js项目，因此我使用vue-cli工具来脚手架生成一个新的webpack项目（即vue init webpack）。

当我浏览生成的文件时，我注意到在src/router/index.js文件中导入了以下内容：

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello' // <- this one is what my qusestion is about

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            name: 'Hello',
            component: Hello
        }
    ]
})

我以前没有在路径中看到过 @ 符号。我猜它允许使用相对路径（也许？），但我想确认一下它的确切作用。

我尝试在网上搜索，但没有找到解释（可能是因为搜索“@符号”或使用文字字符 @ 作为搜索条件不起作用）。

这个路径中的 @ 是什么意思（最好有链接说明），这是 ES6 的东西吗？Webpack 的东西？Vue-loader 的东西？

更新

感谢 Felix Kling 指向了另一个关于同样问题的重复 stackoverflow 问题/答案。

虽然其他 stackoverflow 帖子上的评论不是这个问题的确切答案（在我的情况下它不是 babel 插件），但它确实指导我找到了正确的方向。

在 vue-cli 创建的脚手架中，基本的 webpack 配置设置了一个别名用于 .vue 文件：

这有道理，因为它给出了源文件的相对路径，并且它取消了导入路径结尾需要的 .vue 的要求。

感谢您的帮助！

- Chris Schmitz

4

看我的评论。 - Felix Kling

4

这不是完全的重复，因为它没有回答整个问题，“这是ES6的事情吗？Webpack的事情？还是vue-loader的事情？” - Estus Flask

1

是的，我认为这个问题类似但并不重复。无论如何，我找出了它的来源，并在问题中更新了说明，因为我不能将其添加为答案。 - Chris Schmitz

1

@estus：答案非常清楚地表明它不是ES6的一部分，而是webpack配置的事情，你不觉得吗？这也正是这里的情况，只是配置的性质有点不同。 - Felix Kling

1

@FelixKling 这要看情况。但是，由于您链接的问题没有详细的答案来解释Webpack的情况，它可能值得回答。通常，在问题之间建立“可能是重复的...”评论就足以指示问题之间的联系，而大众的声音会起到作用。我在SO上经常看到问题被重复提出。 - Estus Flask

显示剩余5条评论

13个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Ajuka · Answer 1

@指的是根目录中的src文件夹，在启动应用程序时可以进行配置。

- batSDK · Answer 2

简单来说，"@"符号在导入文件/组件时被用作"src"。

我已经按照以下方式配置了我的webpack.common.js文件。

resolve: {
  extensions: [".ts", ".js", ".vue"],
  alias: {
      '@': path.resolve(__dirname,'src/')
  }
}

我已经像这样导入了vuex store：import store from "@/store";而不是import store from "../store" 你可以在这里阅读更多关于Vue中的Webpack别名的内容

- Madkday · Answer 3

import { createApp, markRaw } from "vue";

import { createPinia } from "pinia";

import App from "./App.vue";

import router from "./router";

// import "./assets/main.css";

const app = createApp(App);

const pinia = createPinia()

pinia.use(({ store })=>{ store.$router = markRaw(router) })

app.use(pinia);

app.use(router);

app.mount("#app");