Vue中使用webpack别名的方法实例详解


Posted in Javascript onJune 19, 2018

在工作中,我们经常会写出这种代码:

import MHeader from '../../components/m-header/m-header'
@import "../../common/stylus/variable"
@import "../../common/stylus/mixin"

即,需要引入公共文件,但是公共文件的文件路径里当前文件很远,那么就会形成上面示例中的那种路径很长的情况。

而因为文件目录是约定俗成的,不可轻易更改,无法修改相对路径。那么该怎么办呢?

大家都知道,Vue中的js可以通过配置webpack别名(alias)来避免一长串的路径引用,即:

// target
import MHeader from 'components/m-header/m-header'
//webpack.base.conf.js
alias: {
  '@': resolve('src'),
  'common': resolve('src/common'),
  'components': resolve('src/components')
}

但是,如果直接把这种方法用在css中,则会报错:

@import "common/stylus/variable"  // error
@import "common/stylus/mixin"    // error

其实,这种方法没有错,只不过webpack对css的处理不同于js。

在js中,webpack对路径进行处理时,自动将没有路径标识(/ ,./,../)的第一个文件夹名当做webpack别名处理。如,第一个文件夹名为components,那么webpack会自动在alias中搜索有没有对应的别名,如果有,则直接替换路径;没有则报错。

在css中,webpack正常情况下,不会对路径进行处理。如果你想让webpack对路径进行处理,那么,可以在路径前标识~,如下:

@import "~common/stylus/variable"
@import "~common/stylus/mixin"

相当于通过添加~表示common是webpack别名而不是表示一个文件夹名。

正确使用webapck别名可以大大缩短引入文件的时间。

总结

以上所述是小编给大家介绍的Vue中使用webpack别名的方法实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery 绑定事件时传递参数的实现方法
Oct 13 Javascript
javascript 程序库的比较(一)之DOM功能
Apr 07 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
Jan 08 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
基于vue 开发中出现警告问题去除方法
Jan 25 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 Javascript
node事件循环和process模块实例分析
Feb 14 Javascript
eslint+prettier统一代码风格的实现方法
Jul 22 Javascript
vue mounted组件的使用
Jun 18 #Javascript
基于rollup的组件库打包体积优化小结
Jun 18 #Javascript
详解组件库的webpack构建速度优化
Jun 18 #Javascript
Javascript实现异步编程的过程
Jun 18 #Javascript
详解JS函数stack size计算方法
Jun 18 #Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 #jQuery
node.js自动上传ftp的脚本分享
Jun 16 #Javascript
You might like
PHP 第二节 数据类型之数值型
2012/04/28 PHP
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
php实现利用phpexcel导出数据
2013/08/24 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
prototype 中文参数乱码解决方案
2009/11/09 Javascript
input 输入框内的输入事件详细分析
2010/03/17 Javascript
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
原生js实现自定义消息提示框
2020/11/19 Javascript
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
python比较两个列表大小的方法
2015/07/11 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS