使用Webpack在vue.js项目中使用('@')登录路径进行ES6导入

克里斯·施密茨(Chris Schmitz):

我正在开始一个新的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帖子上的评论不是该问题的确切答案(在我看来,这不是babel插件),但确实为我指明了正确的方向。

在为您准备的vue-cli脚手架中,基本的webpack配置的一部分为.vue文件设置了别名:

项目中的别名位置

这样做既有道理,也为您提供了src文件中的相对路径,并且消除.vue了导入路径末尾对的要求(通常需要这样做)。

谢谢您的帮助!

可能是Flask:

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

在Vue Webpack模板中,Webpack配置为替换@/srcpath

  const path = require('path');

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

别名用作:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在Ember-cli项目中使用ES6库

使用ES6语法和动态路径导入模块

使用Webpack导入Vue组件

在单独的JS项目中使用Phoenix的`Socket` JS模块

在Node.js项目中使用es6类的正确方法

加载Typescript定义文件时,应该使用ES6导入还是引用路径?

在Angular 2项目中使用Typescript 2导入和使用无类型的传单JS插件

在Angular CLI项目中使用ES6

是否可以在ES6项目中使用自定义类型定义?

在混合ES / TS项目中使用Vue组件

使用Webpack和Babel的ES6动态导入

在另一个webpack项目中使用webpack编译的库,什么也不会导入

在NodeJS项目中的TypeScript中使用路径

如何在Vue项目中使用Chance js?

使用ES6和let / const进行导出/导入和Karma / webpack-顶部导出

在独立项目中使用Vue.js

在VueJS项目中使用Threejs导入图像

如何在VUE项目中使用导入的字体?

我应该在ES6节点项目中使用多少Promise?

IOS Swift项目中使用OpenCV进行视频处理

为了在使用Gulp的项目中使用ES6样式导入,我需要哪些工具?

在 angular 6 项目中使用 @tensorflow/tfjs 时出错

在 Django 项目中使用 Zurb Foundation 6 javascript

在 angular 6 cli 项目中使用 Javascript 和 Jquery

如何使用 Vim 按字母顺序对 JS es6 导入进行排序

如何在 angular 6 项目中使用 javascript npm?

在我的 Symfony 项目中使用 Webpack encore 进行资产管理

无法在基于 jest 和 vue-test-utils 的测试项目中使用 vue.js 的 ES6 模块

如何在本地文件中导入数组以在 Vue 3 TypeScript 项目中使用?