-
JavaScript教程之Vue中使用webpack别名的方法
在工作中,我们经常会写出这种代码:
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别名可以大大缩短引入文件的时间。
栏目列表
最新更新
C#实现的对文件的重命名
C#设计模式学习笔记:(1)单例模式
C#实现DataTable转为Excel文件
C#设计模式学习笔记:简单工厂模式(工厂
Reflection(反射)
建造者模式(Builder)——从组装电脑开始
C# 调用APlayer教程
Dynamics CRM 365中结合注释和WebApi实现图片上
C# 添加文本、图片到PDF文档(基于Spire.
C#中System.ServiceProgress报错
基于UDP的服务器端和客户端
再谈UDP和TCP
在socket编程中使用域名
网络数据传输时的大小端问题
socket编程实现文件传输功能
如何优雅地断开TCP连接?
图解TCP四次握手断开连接
详细分析TCP数据的传输过程
图解TCP数据报结构以及三次握手(非常详
TCP协议的粘包问题(数据的无边界性)
一张图看懂 SQL 的各种 join 用法
执行count(1)、count(*) 与 count(列名) 到底有
如何去写一手好SQL ?
续 | 一套简单实用的SQL脚本,总有你需要
几道常见的SQL面试题,看你能答对几道?
你有一份经典SQL语句大全,请注意查收!
如何更优雅的写出你的SQL语句
当你执行JOIN ON时,数据库里发生了什么?
SQL 语句中 WHERE 条件后 写上1=1 是什么意思
常用SQL函数太简单?那是你没用过这些高