Vue中使用webpack别名的方法实例详解
作者:格子熊 时间:2024-05-11 09:13:41
在工作中,我们经常会写出这种代码:
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别名的方法实例详解网站的支持!
来源:https://www.cnblogs.com/karthuslorin/archive/2018/06/18/9195570.html
标签:vue,webpack,别名
0
投稿
猜你喜欢
使用Python Fast API发布API服务的过程详解
2022-05-19 20:03:44
解决pycharm安装后代码区不能编辑的问题
2022-07-26 22:26:24
Tensorflow 2.4加载处理图片的三种方式详解
2023-12-07 05:28:26
JavaScript风格要素
2007-10-25 16:57:00
基于Vue实现简单的贪食蛇游戏
2024-04-27 16:13:17
Python使用htpasswd实现基本认证授权的例子
2022-05-07 06:43:17
Python实现批量读取HDF多波段栅格数据并绘制像元直方图
2023-08-20 17:27:08
基于Python实现语音合成小工具
2023-01-13 15:25:38
Django REST 异常处理详解
2023-06-19 02:40:34
python画一个圣诞树实现示例
2021-06-12 03:54:53
Go语言中普通函数与方法的区别分析
2024-02-08 18:02:23
vue中的循环对象属性和属性值用法
2024-04-28 09:25:36
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2022-06-08 09:09:28
python的数据与matlab互通问题:SciPy
2022-05-16 04:53:48
python实现从ftp服务器下载文件
2022-04-30 18:54:53
深入了解Go语言中web框架的中间件运行机制
2024-04-26 17:24:33
详解Python中使用base64模块来处理base64编码的方法
2022-01-12 01:27:19
不能忽略c#中的using和as操作符的用处
2024-03-23 08:08:41
Pytorch之卷积层的使用详解
2022-09-04 16:43:21
什么是python的函数体
2022-07-29 22:09:32