导入路径中的@是什么意思？

Question

我正在启动一个新的 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 question is about

    Vue.use(Router)

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

我以前没有在路径中看到过 at 符号 (

@

)。我怀疑它允许相对路径（也许？），但我想确保我理解它真正的作用。

我尝试在网上搜索，但无法找到解释（可能是因为搜索“at 符号”或使用文字字符

@

作为搜索条件没有帮助）。

@

在这条路径中做了什么（链接到文档会很棒），这是 es6 的东西吗？一个 webpack 的东西？ vue-loader 的东西？

更新

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

虽然其他 stackoverflow 帖子上的评论并不是这个问题的确切答案（在我的例子中它不是 babel 插件），但它确实为我指明了找到它是什么的正确方向。

在 vue-cli 为您构建的脚手架中，基础 webpack 配置的一部分为 .vue 文件设置了别名：

这是有意义的，因为它为您提供了 src 文件的相对路径 并且它消除了导入路径末尾的

.vue

的要求（您通常需要）。

感谢您的帮助！

Answer 1

这是通过 Webpack

resolve.alias

配置选项完成的，并非特定于 Vue。

在Vue Webpack模板中，Webpack配置为将

@/

替换为

src

路径：

  const path = require('path');

  ...
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      ...
      '@': path.resolve('src'),
    }
  },
  ...

别名用作：

import '@/<path inside src folder>';

Answer 2

另请记住，您也可以在 tsconfig 中创建变量：

"paths": {
  "@components": ["src/components"],
  "@scss": ["src/styles/scss"],
  "@img": ["src/assests/images"],
  "@": ["src"],
}

这可用于命名约定目的：

import { componentHeader } from '@components/header';

Answer 3

我通过以下组合克服了

import HelloWorld from '@/components/HelloWorld'
=>
import HelloWorld from 'src/components/HelloWorld'

IDE 将停止警告 uri，但这会导致编译时“build\webpack.base.conf.js”中的 uri 无效

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'src': resolve('src'),
  }
},

宾果！

Answer 4

也许尝试添加到 webpack 中。 mix.webpackConfig参考laravel mix。

mix.webpackConfig({

    resolve: {
        alias: {
            '@imgSrc': path.resolve('resources/assets/img')
        }
    }
});

然后在vue中使用。

<img src="@imgSrc/logo.png" />

Answer 5

解决（'src'） 没有适合我的作品 但 路径.resolve('src') 作品

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve('src')
    },
    extensions: ['*', '.js', '.vue', '.json']
  },

Answer 6

一定有什么改变了。这里给出的答案不再正确。 Chapter09中的这个项目在其导入语句中使用了@符号，但是webpack.config.js文件没有路径解析语句：

let service = process.VUE_CLI_SERVICE

if (!service || process.env.VUE_CLI_API_MODE) {
  const Service = require('./lib/Service')
  service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
  service.init(process.env.VUE_CLI_MODE || process.env.NODE_ENV)
}

module.exports = service.resolveWebpackConfig()

Answer 7

Vue3和Vite中使用了类似的方法，别名可以在

vite.config.js

中找到

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),vueJsx()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

Answer 8

简单来说，导入文件/组件时，“@”符号用作

“src”。

我已经配置了我的

webpack.common.js

文件，如下所示

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

我已经像这样导入了vuex商店

import store from "@/store";

而不是

import store from "../store"

您可以在此处阅读有关

Vue 中的 Webpack 别名 的更多信息

Answer 9

在 Next.js 中应用的一个示例是使用文件

next.config.js

 添加下一个内容。

const path = require('path');

module.exports = {
  webpack: (config, options) => {
    config.resolve.alias = {
      '@': path.resolve(process.cwd(), 'src'),
    };
    return config;
  }
};

Answer 10

它指的是在 config.js 文件中找到的别名路径

Answer 11

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

Answer 12

我们有时使用“@”从路径为“src/components/Add.vue”的组件目录中导入。如果我们需要从像“src/views/AboutView.vue”这样的 diff 目录访问此文件，我们可以使用它在 AboutView.vue 中导入 Add.vue 作为 从“@/components/Add.vue”导入添加， 在你的标签内。 这与使用相同 从“../components/Add.vue”导入添加 '@' 指向您的应用程序的根目录（src 文件夹）

Answer 13

import { createApp, markRaw } from "vue";

import { createPinia } from "pinia";

import App from "./App.vue";

import router from "./router";

//导入“./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");