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 相关文章推荐
Javascript里使用Dom操作Xml
Jan 22 Javascript
一个tab标签切换效果代码
Mar 27 Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
再论Javascript下字符串连接的性能
Mar 05 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
用js传递value默认值的示例代码
Sep 11 Javascript
浅谈javascript中return语句
Jul 15 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
js实现GIF图片的分解和合成
Oct 24 Javascript
vue之组件内监控$store中定义变量的变化详解
Nov 08 Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
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
DSP接收机前端设想
2021/03/02 无线电
php获取地址栏信息的代码
2008/10/08 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
JS操作数据库的实例代码
2013/10/17 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
用Python设计一个经典小游戏
2017/05/15 Python
Python实现句子翻译功能
2017/11/14 Python
Python快速排序算法实例分析
2017/11/29 Python
Python随机函数random()使用方法小结
2018/04/29 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
销售主管的自我评价分享
2014/01/03 职场文书
优秀教师先进事迹
2014/01/22 职场文书
团队拓展活动方案
2014/08/28 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
2014年采购部工作总结
2014/11/20 职场文书
2015国庆节感想
2015/08/04 职场文书
给学校的建议书400字
2015/09/14 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
用Python实现屏幕截图详解
2022/01/22 Python
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python