在vue的项目里,我们可以使用../这样的相对路径的方式引用不同目录的组件:

import userinfo from '../../../components/userinfo.vue';

使用../引用的路径比较深,定位路径和书写不方便,并且不直观。

由于项目是基于webpack,比较好的做法是使用webpack对路径定义一个别名。

在webpack.base.config.js找到resolve节点,配置别名如下:

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

不同组件之间引用,如上面的示例:

import userinfo from '@components/userinfo.vue';

这样引用就一目了然。

基于webpack的vue项目路径别名的更多相关文章

  1. webpack搭建vue项目开发环境【文档向学习】

    为何有这篇文章 各个社区已经有无数篇帖子介绍如何使用webpack搭建前端项目,但无论是出于学习webpack的目的还是为了解决工作实际需要都面临着一个现实问题,那就是版本更新.别人的帖子可能刚写好版 ...

  2. 从零搭建基于webpack的Electron-Vue3项目(1)——基于webpack的Vue3项目搭建

    从零搭建基于webpack的Electron-Vue3项目(1)--基于webpack的Vue3项目搭建 前言 本篇文章内容,主要是基于webpack的Vue3项目开发环境进行搭建,暂时还不涉及到El ...

  3. 基于webpack+react+antd 项目构建

    工欲善其事必先利其器,学习React也是如此. 下面分享一篇基于webpack+react+antd 项目构建的好文章, https://blog.hduzplus.xyz/articles/2017 ...

  4. webpack打包vue项目之后生成的dist文件该怎么启动运行

    亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...

  5. 基于Typescript的Vue项目配置国际化

    基于Typescript的Vue项目配置国际化 简介 使用vue-i18n插件对基于Typescript的vue项目配置国际化,切换多种语言, 配合element-ui或者其他UI库 本文以配置中英文 ...

  6. vue项目,webpack中配置src路径别名及使用

    1.项目结构: 2.在build文件夹下的webpack.base.conf.js文件中设置src的路径别名. 3.在js文件或者vue文件的script标签中使用: (1).js文件中导入示例: ( ...

  7. webpack构建vue项目(再谈配置)

    webpack配置起来确实麻烦,这不,之前用刚配好了vue1+的版本,结果在(部分)安卓机上测试,发现存在开启热加载(dev-server)的情况下不能识别vue语法的问题,试了很多方法,都没能很好的 ...

  8. webpack构建vue项目(配置篇)

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

  9. webpack搭建vue项目,实现脚手架功能

    本文基于node.js开发环境,安装完node之后新建项目,通过webpack配置,实现vue-cli脚手架功能 对于刚刚接触编程的人来说,最难的可能并不是学习一种新语法或者框架,而是编程思维,这种思 ...

随机推荐

  1. Gearman 分布式的异步任务分发框架

    What is Gearman? Gearman provides a generic application framework to farm out work to other machines ...

  2. Python 网络爬虫 002 (入门) 爬取一个网站之前,要了解的知识

    网站站点的背景调研 1. 检查 robots.txt 网站都会定义robots.txt 文件,这个文件就是给 网络爬虫 来了解爬取该网站时存在哪些限制.当然了,这个限制仅仅只是一个建议,你可以遵守,也 ...

  3. JavaPersistenceWithHibernate第二版笔记-第七章-004Mapping a map(@MapKeyEnumerated 、 @MapKeyTemporal、@MapKeyColumn)

    一.结构 二.代码 1. package org.jpwh.model.collections.mapofstrings; import org.jpwh.model.Constants; impor ...

  4. 数字图像处理实验(1):PROJECT 02-01, Image Printing Program Based on Halftoning 标签: 图像处理MATLAB 2017-04-2

    实验要求: Image Printing Program Based on Halftoning Objective: To know in principle what is "halft ...

  5. 对private protected public的详解:

    #include <iostream> #include <stack> #include <queue> #include <exception> # ...

  6. javascript 准确的判断类型方法

    在 JavaScript 里使用 typeof 来判断数据类型,只能区分基本类型,即 “number”,”string”,”undefined”,”boolean”,”object” 五种. 对于数组 ...

  7. mysql--表数据的操作

    插入数据 --测试插入数据 INSERT 表名 VALUES|VALUE(值...)--当没有指定插入顺序的时候按照表的原来的顺序进行插入 INSERT 表名(需要赋值的字段名称) VALUES|VA ...

  8. Picasso VS Glide

    原文: Introduction to Glide, Image Loader Library for Android, recommended by Google 在泰国举行的谷歌开发者论坛上,谷歌 ...

  9. Mac下的UI自动化测试 (一)

    在我看来,实现UI自动化测试的过程一向都是令人快乐的事情,而维护它们就是跟噩梦一样了,尤其是对每次CI产生的build进行BVT测试,由于开发不会告诉你任何UI的变化,那么你拿到的测试结果就势必会一片 ...

  10. SnackBar使用

    注意:build(BuildContext context)在 Scaffold.of(context)之前时,会报错,解决办法:通过build widget来解决,如下代码. import 'pac ...