在vue项目中,我们可以利用“@”来指代src目录,在普通webpack项目中,我们也可以通过配置webpack的config来指定路径别名,但是在typescript+webpack项目中我们该怎么配置别名呢?

参考文档https://www.tslang.cn/docs/handbook/module-resolution.html 可知typescript是通过tsconfig.json中的paths项来进行配置的。这里以配置“src”为项目src目录来作为演示。

tsconfig.json:

    "paths": {
"src/*":[
"src/*"
]
}

这将告诉编译器,在解析路径的时候统一将src解析为baseUrl下的src目录。

之后配置webpack:

  resolve: {
alias: {
'src': path.resolve(__dirname, "../src/") //src文件夹路径
},
},

如果你使用了tslint,还要配置tslint.json以告诉tslint将src加入白名单。

"rules": {
"no-implicit-dependencies":[true,["src"]],
"no-submodule-imports":[true,"src"],
},

typescript项目配置路径别名(路径映射)的更多相关文章

  1. 在TypeScript项目中进行BDD测试

    在TypeScript项目中进行BDD测试 什么是BDD? BDD(Behavior-Driven Design)是软件团队的一种工作方式,通过以下方式缩小业务人员和技术人员之间的差距: 鼓励跨角色协 ...

  2. vue项目,webpack中配置src路径别名及使用

    1.项目结构: 2.在build文件夹下的webpack.base.conf.js文件中设置src的路径别名. 3.在js文件或者vue文件的script标签中使用: (1).js文件中导入示例: ( ...

  3. webpack + ts 配置路径别名无死角方法总结

    webpack + ts 配置路径别名总结 自我体验加总结:在配置脚手架时,定制别名很有必要,可以使得代码更优雅,可读性更强.但在使用ts的时候,即便项目能够运行,vscode 确时长会提示 can' ...

  4. wamp配置虚拟路径(路径别名)

    wamp默认的路径是安装目录下的 www 目录, 如果你想运行php代码,就需要将代码放在 www 目录下, 但这样很不方便,能否通过配置的方式,来实现 在别的目录下的 php 代码,也能正常运行和访 ...

  5. tomcat配置外部静态资源映射路径

    一.背景 1.有一个录音软件每天生成很多新的录音文件. 2.现在想通过一个WEB项目页面下载这些录音文件. 3.很显然这些录音文件放在WEB项目下不是很合适(WEB项目更新是个大麻烦,海量的录音文件要 ...

  6. vue项目中的路径别名

    每次写引入组件的路径,如果路径嵌套比较深,那么会比较麻烦,我们可以在webpack.base.conf.js,中设置路径的别名,默认webpack设置src的别名为@ 建议配置src下一级目录的别名, ...

  7. react import 配置路径别名'@',简化import Component的方式

    摘要 在react中,大多数业务逻辑都组件化:极大的减轻了代码的冗余度,如果组件的层次比较深的话,组件的import就比较费劲,在import时使用“../../components/test”的方式 ...

  8. 【vue-cli 3.0】 vue.config.js配置 - 路径别名

    如何配置vue-cli 3中vue.config.js的路径别名? 前段时间更新电脑重装了一下vue-cli,发现了vue-cli已经更新到3.0版.用来搭建项目后发现简化了很多,而且配置文件现在可以 ...

  9. Linux配置和管理设备映射多路径multipath

    (一)多路径管理软件的由来 在企业中,服务器与存储通常是分开放置的,服务器上的硬盘通常用来安装操作系统和应用软件,业务数据则是存储在单独的存储设备上,那么,服务器与存储是如何连接的呢?根据存储协议,经 ...

随机推荐

  1. Adobe Photoshop Lightroom 5.3和序列号

    Adobe Photoshop Lightroom是一款针对专业摄影师开发的专业照片管理和处理软件.12.11发布了Lightroom 5.3正式版,这个版本支持RAW格式(相机原始数据格式),镜头配 ...

  2. CS231n——图像分类(KNN实现)

    图像分类   目标:已有固定的分类标签集合,然后对于输入的图像,从分类标签集合中找出一个分类标签,最后把分类标签分配给该输入图像.   图像分类流程 输入:输入是包含N个图像的集合,每个图像的标签是K ...

  3. HTML5_纯JS实现上传文件显示文件大小,文件信息,上传进度_不使用JS库

    前台 html <input type="file" id="_netLogo" onchange="fileSelected();" ...

  4. Java中类的继承深入剖析

    在Java开发中,我们常常用到继承这一概念,可以说继承是Java这类面向对象编程语言的基石.正是有了继承这个概念,使得我们可以创建分等级层次的类.今天小编就和大家一起来深入聊聊Java语言的继承. 在 ...

  5. hdu 2516 取石子游戏 (博弈)

    取石子游戏 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  6. POJ 2749 Building roads 2-sat+二分答案

    把爱恨和最大距离视为限制条件,可以知道,最大距离和限制条件多少具有单调性 所以可以二分最大距离,加边+check #include<cstdio> #include<algorith ...

  7. LNMP下安装phpmyadmin的一个小错误解决办法

    环境:ubuntu16.04 + nginx1.10.0 + php7.04 + mysql5.6 安装phpmyadmin之后tail nginx 的错误日志,提示以下: 2016/06/30 15 ...

  8. win7 iis 7.0 碰到 503错误,找到的解决方案

    Service Unavailable HTTP Error 503. The service is unavailable. 今天要布署一个网站,在自己的电脑上,结果碰到服务器503错误,找应用程序 ...

  9. Oracle中DBMS_LOB包使用小结

    本文主要介绍oracle数据库中dbms_lob包的使用以及使用dbms_lob包来维护lob数据库类型的基本方法.随着社会的发展,在现代信息系统的开发中,需要存储的已不仅仅是简单的文字信息,同时还包 ...

  10. 放棋游戏(NOIP模拟赛)(DP)

    没有原题... 囧.. [问题描述] 游戏规则是这样,有n(1<=n<=100)行格子,第一行由n个格子,第二行有n-1个格子,第三行由n-2个格子,……以此类推,第n行有1个格子.要求再 ...