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

我开始一个新的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文件设置了别名:

Alias location within project

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

谢谢你的帮助!

141308 次浏览
小开
最佳答案

这是通过Webpack resolve.alias配置选项完成的，并不特定于Vue。

Webpack被配置为用src路径替换@/:

  const path = require('path');


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

别名的用法如下:

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

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

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

这可以用于命名约定:

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

我用下面的组合完成

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

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

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

Bingoo !

小开

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

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

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

mix.webpackConfig({


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

然后是vue使用。

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

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

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

const path = require('path');


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

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

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

提交答案