基于webpack的vue项目路径别名
在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项目路径别名的更多相关文章
- webpack搭建vue项目开发环境【文档向学习】
为何有这篇文章 各个社区已经有无数篇帖子介绍如何使用webpack搭建前端项目,但无论是出于学习webpack的目的还是为了解决工作实际需要都面临着一个现实问题,那就是版本更新.别人的帖子可能刚写好版 ...
- 从零搭建基于webpack的Electron-Vue3项目(1)——基于webpack的Vue3项目搭建
从零搭建基于webpack的Electron-Vue3项目(1)--基于webpack的Vue3项目搭建 前言 本篇文章内容,主要是基于webpack的Vue3项目开发环境进行搭建,暂时还不涉及到El ...
- 基于webpack+react+antd 项目构建
工欲善其事必先利其器,学习React也是如此. 下面分享一篇基于webpack+react+antd 项目构建的好文章, https://blog.hduzplus.xyz/articles/2017 ...
- webpack打包vue项目之后生成的dist文件该怎么启动运行
亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...
- 基于Typescript的Vue项目配置国际化
基于Typescript的Vue项目配置国际化 简介 使用vue-i18n插件对基于Typescript的vue项目配置国际化,切换多种语言, 配合element-ui或者其他UI库 本文以配置中英文 ...
- vue项目,webpack中配置src路径别名及使用
1.项目结构: 2.在build文件夹下的webpack.base.conf.js文件中设置src的路径别名. 3.在js文件或者vue文件的script标签中使用: (1).js文件中导入示例: ( ...
- webpack构建vue项目(再谈配置)
webpack配置起来确实麻烦,这不,之前用刚配好了vue1+的版本,结果在(部分)安卓机上测试,发现存在开启热加载(dev-server)的情况下不能识别vue语法的问题,试了很多方法,都没能很好的 ...
- webpack构建vue项目(配置篇)
最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...
- webpack搭建vue项目,实现脚手架功能
本文基于node.js开发环境,安装完node之后新建项目,通过webpack配置,实现vue-cli脚手架功能 对于刚刚接触编程的人来说,最难的可能并不是学习一种新语法或者框架,而是编程思维,这种思 ...
随机推荐
- Gearman 分布式的异步任务分发框架
What is Gearman? Gearman provides a generic application framework to farm out work to other machines ...
- Python 网络爬虫 002 (入门) 爬取一个网站之前,要了解的知识
网站站点的背景调研 1. 检查 robots.txt 网站都会定义robots.txt 文件,这个文件就是给 网络爬虫 来了解爬取该网站时存在哪些限制.当然了,这个限制仅仅只是一个建议,你可以遵守,也 ...
- JavaPersistenceWithHibernate第二版笔记-第七章-004Mapping a map(@MapKeyEnumerated 、 @MapKeyTemporal、@MapKeyColumn)
一.结构 二.代码 1. package org.jpwh.model.collections.mapofstrings; import org.jpwh.model.Constants; impor ...
- 数字图像处理实验(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 ...
- 对private protected public的详解:
#include <iostream> #include <stack> #include <queue> #include <exception> # ...
- javascript 准确的判断类型方法
在 JavaScript 里使用 typeof 来判断数据类型,只能区分基本类型,即 “number”,”string”,”undefined”,”boolean”,”object” 五种. 对于数组 ...
- mysql--表数据的操作
插入数据 --测试插入数据 INSERT 表名 VALUES|VALUE(值...)--当没有指定插入顺序的时候按照表的原来的顺序进行插入 INSERT 表名(需要赋值的字段名称) VALUES|VA ...
- Picasso VS Glide
原文: Introduction to Glide, Image Loader Library for Android, recommended by Google 在泰国举行的谷歌开发者论坛上,谷歌 ...
- Mac下的UI自动化测试 (一)
在我看来,实现UI自动化测试的过程一向都是令人快乐的事情,而维护它们就是跟噩梦一样了,尤其是对每次CI产生的build进行BVT测试,由于开发不会告诉你任何UI的变化,那么你拿到的测试结果就势必会一片 ...
- SnackBar使用
注意:build(BuildContext context)在 Scaffold.of(context)之前时,会报错,解决办法:通过build widget来解决,如下代码. import 'pac ...