使用Webpack在vue.js项目中使用at('@')登录路径进行ES6导入
Chr*_*itz 211 javascript ecmascript-6 webpack vue.js
我正在开始一个新的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符号().我怀疑它允许相对路径(也许？)但我想确定我理解它真正的作用.
我尝试在网上搜索,但无法找到解释(因为搜索"at sign"或使用文字字符@没有帮助作为搜索条件).
@在这条道路上做了什么(链接到文档会很棒)这是一个es6的事情？一个webpack的东西？一个vue-loader的东西？
UPDATE
感谢Felix Kling指出我关于同一个问题的另一个重复的stackoverflow问题/答案.
虽然对其他stackoverflow帖子的评论不是这个问题的确切答案(在我的情况下它不是一个babel插件)但它确实指出了我找到它的正确方向.
在vue-cli为你创建的脚手架中,基本webpack配置的一部分为.vue文件设置了一个别名:
这有意义,因为它为您提供了来自src文件的相对路径,并且它删除.vue了导入路径末尾(通常需要)的要求.
谢谢您的帮助!
Est*_*ask 191
这是通过Webpack resolve.alias配置选项完成的,并不特定于Vue.
在Vue Webpack模板中,Webpack配置为替换@/为srcpath:
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
...
'@': resolve('src'),
}
},
...
- JavaScript不再是JavaScript了.Babel/webpack为我们提供了这种Frankenstein语言,并且不知何故,新的开发人员应该知道ECMAScript规范的终止和用户插件/转换的开始.非常悲伤,imo. (128认同)
- 我个人认为,如果你想要它,增加灵活性是一件好事.我认为它不像弗兰肯斯坦那样,更像是伏特龙; 你可以像狮子一样做,或者把不同的狮子组合在一起,拥有更大的机器人.是的,有时候你会得到像这样的问题,但是不能找到答案.实际上,您可以将frankenstein或voltron视图与任何规模的项目一起使用,它只是"使用和理解依赖关系". (13认同)
- 当使用`vue-cli` v3 +时，应该使用~~ @来引用`src`文件夹。例如：`$ font-path：'〜@ / assets / fonts /';` (3认同)
- @naomik用户可以在设置中引入这些技巧.这对Vue来说并不是什么大不了的事,因为它依赖于它的自定义.vue文件格式. (2认同)
小智 18
还要记住，您也可以在 tsconfig 中创建变量：
"paths": {
"@components": ["src/components"],
"@scss": ["src/styles/scss"],
"@img": ["src/assests/images"],
"@": ["src"],
}
这可以用于命名约定目的：
import { componentHeader } from '@components/header';
小智 5
我通过以下组合克服了
import HelloWorld from '@/components/HelloWorld'
=>
import HelloWorld from 'src/components/HelloWorld'
IDE 将停止警告 uri，但这会导致编译时“build\webpack.base.conf.js”中的 uri 无效
import HelloWorld from '@/components/HelloWorld'
=>
import HelloWorld from 'src/components/HelloWorld'
宾果！