Javascript 在使用 Webpack 的 vue.js 项目中使用 at ('@') 登录路径导入 ES6
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42749973/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ES6 import using at ('@') sign in path in a vue.js project using Webpack
提问by Chris Schmitz
I'm starting out a new vue.js project so I used the vue-cli tool to scaffold out a new webpack project (i.e. vue init webpack).
我正在开始一个新的 vue.js 项目，所以我使用了 vue-cli 工具来搭建一个新的 webpack 项目（即vue init webpack）。
As I was walking through the generated files I noticed the following imports in the src/router/index.jsfile:
当我浏览生成的文件时，我注意到文件中有以下导入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
}
]
})
I've not seen the at sign (@) in a path before. I suspect it allows for relative paths (maybe?) but I wanted to be sure I understand what it truly does.
我以前从未@在路径中看到 at 符号 ( )。我怀疑它允许使用相对路径（也许？）但我想确保我了解它的真正作用。
I tried searching around online but wasn't able to find an explanation (prob because searching for "at sign" or using the literal character @doesn't help as search criteria).
我尝试在网上搜索，但找不到解释（可能是因为搜索“at 符号”或使用文字字符@作为搜索条件无济于事）。
What does the @do in this path (link to documentation would be fantastic) and is this an es6 thing? A webpack thing? A vue-loader thing?
@这个路径有什么作用（链接到文档会很棒），这是 es6 的东西吗？一个 webpack 的东西？一个 vue-loader 的东西？
UPDATE
更新
Thanks Felix Kling for pointing me to another duplicate stackoverflow question/answer about this same question.
感谢 Felix Kling 为我指出关于同一问题的另一个重复的 stackoverflow 问题/答案。
While the comment on the other stackoverflow post isn't the exact answer to this question (it wasn't a babel plugin in my case) it did point me in the correct direction to find what it was.
虽然对其他 stackoverflow 帖子的评论并不是这个问题的确切答案（在我的例子中它不是 babel 插件），但它确实为我指明了正确的方向来找到它是什么。
In in the scaffolding that vue-cli cranks out for you, part of the base webpack config sets up an alias for .vue files:
在 vue-cli 为您制作的脚手架中，基本 webpack 配置的一部分为 .vue 文件设置了别名：
This makes sense both in the fact that it gives you a relative path from the src file andit removes the requirement of the .vueat the end of the import path (which you normally need).
这是有道理的，因为它为您提供了来自 src 文件的相对路径，并且它删除.vue了导入路径末尾的要求（您通常需要）。
Thanks for the help!
谢谢您的帮助！
采纳答案by Estus Flask
This is done with Webpack resolve.aliasconfiguration option and isn't specific to Vue.
这是通过 Webpackresolve.alias配置选项完成的，并非特定于 Vue。
In Vue Webpack template, Webpack is configured to replace @/with srcpath:
在 Vue Webpack 模板中，Webpack 被配置为替换@/为srcpath：
const path = require('path');
...
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
...
'@': path.resolve('src'),
}
},
...
The alias is used as:
别名用作：
import '@/<path inside src folder>';
回答by Tyler Canton
Also keep in mind you can create variables in tsconfig as well:
还要记住，您也可以在 tsconfig 中创建变量：
"paths": {
"@components": ["src/components"],
"@scss": ["src/styles/scss"],
"@img": ["src/assests/images"],
"@": ["src"],
}
This can be utilized for naming convention purposes:
这可以用于命名约定目的：
import { componentHeader } from '@components/header';
回答by Luan Tr??ng
I get over with following combination
我克服了以下组合
import HelloWorld from '@/components/HelloWorld'
=>
import HelloWorld from 'src/components/HelloWorld'
IDE will stop warning the uri, but this causes invalid uri when compile, in "build\webpack.base.conf.js"
IDE 将停止警告 uri，但这会在编译时导致无效的 uri，在“build\webpack.base.conf.js”中
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'src': resolve('src'),
}
},Bingoo!
宾果！
回答by Marcelo Assis
resolve('src')no works for me but path.resolve('src') works
resolve('src')对我不起作用，但 path.resolve('src') 有效
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.resolve('src')
},
extensions: ['*', '.js', '.vue', '.json']
},
回答by Paul
Maybe try adding in webpack. mix.webpackConfigreferences laravel mix.
也许尝试添加 webpack。mix.webpackConfig引用了laravel mix。
mix.webpackConfig({
resolve: {
alias: {
'@imgSrc': path.resolve('resources/assets/img')
}
}
});
And then in vue use.
然后在vue中使用。
<img src="@imgSrc/logo.png" />
