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

我开始一个新的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
        }
    ]
})

我以前从未在路径中见过@符号。我怀疑它允许相对路径(也许?)，但我想确保我理解它真正的功能。

我试着在网上搜索，但没有找到解释(可能是因为搜索“at”或使用文字字符@作为搜索条件没有帮助)。

@在这个路径中做了什么(链接到文档会很棒)，这是es6的事情吗?webpack的东西?vue-loader之类的东西?

更新

感谢Felix Kling为我指出了关于这个问题的另一个重复的stackoverflow问题/答案。

虽然另一篇stackoverflow帖子上的评论并不是这个问题的确切答案(在我的情况下，它不是一个巴别塔插件)，但它确实为我指明了正确的方向，让我找到了它是什么。

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

这是有意义的，因为它为您提供了src文件的相对路径，并在导入路径的末尾删除了.vue的要求(通常需要)。

谢谢你的帮助!

这是通过Webpack解析完成的。别名配置选项，并不是特定于Vue。

在Vue Webpack模板中，Webpack被配置为用src路径替换@/:

  const path = require('path');

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

别名的用法如下:

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

2017-03-12 20:54:21

还要记住，你也可以在tsconfig中创建变量:

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

这可以用于命名约定:

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

2019-04-19 15:39:40

我用下面的组合完成

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

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

(resolve: 扩展:vue’,' json’], (又名: ’src’:resolve(’src’), ) }，

Bingoo !

2019-06-12 14:41:15

解决(“src”) 对我来说没有作用但 path.resolve(“src”) 作品

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

2019-09-17 22:16:29

也许可以尝试添加webpack。混合。webpackConfig引用laravel mix。

mix.webpackConfig({

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

然后是vue使用。

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

2020-05-22 17:43:46

一定是发生了什么变化。这里给出的答案不再正确。09章中的这个项目在它的import语句中使用了@符号，但是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()

2020-07-16 17:29:40

在next. js中应用的一个例子是使用文件next.config.js来添加下一个内容。

const path = require('path');

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

2022-06-14 07:36:19

ve3和Vite中使用了类似的方法，别名可以在Vite .config.js中找到

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

2022-08-30 23:48:09

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

2022-12-08 19:22:07

@指的是根目录中的SRC文件夹，它可以在引导应用程序时配置。

2023-01-12 12:14:31

import { createApp， markRaw } from “vue”;

import {createPinia} from "pinia";

import App from "./App.vue";

从“。/router”导入路由器;

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

const app = createApp(app);

const pinia = createPinia()