我正在开始一个新的 vue.js 项目,所以我使用 vue-cli 工具搭建了一个新的 webpack 项目(即vue init webpack)。
vue init webpack
当我浏览生成的文件时,我注意到文件中有以下导入src/router/index.js:
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 符号”或使用文字字符@无助于搜索条件)。
在这条道路上做了什么@(链接到文档会很棒),这是 es6 的事情吗?一个 webpack 的东西?一个 vue-loader 的东西?
感谢 Felix Kling 向我指出关于同一问题的另一个重复的 stackoverflow 问题/答案。
虽然对另一个 stackoverflow 帖子的评论并不是这个问题的确切答案(在我的情况下它不是 babel 插件),但它确实为我指明了正确的方向来找到它是什么。
在 vue-cli 为您创建的脚手架中,部分基本 webpack 配置为 .vue 文件设置了别名:
这是有道理的,因为它为您提供了 src 文件的相对路径, 并且 消除了.vue导入路径末尾的要求(您通常需要)。
.vue
谢谢您的帮助!
这是通过 Webpackresolve.alias配置选项完成的,并不特定于 Vue。
resolve.alias
在 Vue Webpack 模板中,Webpack 被配置为替换@/为srcpath:
@/
src
const path = require('path'); ... resolve: { extensions: ['.js', '.vue', '.json'], alias: { ... '@': path.resolve('src'), } }, ...
别名用作:
import '@/<path inside src folder>';