Vue CL3 配置路径别名详解


Posted in Javascript onMay 30, 2019

Cli3工具中,配置路径别名

最近用Vue Cli3脚手架搭建了Vue项目,发现没有build目录了,里面的webpack相关的也没了,看了官方文档后,查了资料后,发现都在vue.config.js里来配置了

配置路径别名,方便引用,不用写那么长

配置前:

import TodoList from '../../components/TodoList'

配置后(不用再关心文件层级关系):

import TodoList from 'components/TodoList'

在根目录下添加'vue.config.js',

添加如下代码:

const path = require('path')
function resolve(dir) {
 return path.join(__dirname, dir)
}
module.exports = {
 lintOnSave: true,
 chainWebpack: config => {
  config.resolve.alias
   .set('@', resolve('src'))
   .set('assets', resolve('src/assets'))
   .set('components', resolve('src/components'))
   .set('layout', resolve('src/layout'))
 }
}

使用:

import TodoList from 'components/TodoList'

注意事项

  1. vue.config.js文件创建完后,不需要什么操作,@vue/cli-service会自己识别,如果出现报错等等,可以先尝试重启下IDE或者启动下项目
  2. vue.config.js在vue项目创建后,默认是没有的,是一个可选的文件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
JS 控制CSS样式表
Aug 20 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 Javascript
JavaScript 实现类的多种方法实例
May 01 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
js实现照片墙功能实例
Feb 05 Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
Vuex提升学习篇
Jan 11 Javascript
JavaScript继承与聚合实例详解
Jan 22 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
JavaScript实现密码强度实时验证
Mar 18 Javascript
Vue CLI3中使用compass normalize的方法
May 30 #Javascript
通过实践编写优雅的JavaScript代码
May 30 #Javascript
AngularJs中$cookies简单用法分析
May 30 #Javascript
JS使用new操作符创建对象的方法分析
May 30 #Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 #Javascript
简述pm2常用命令集合及配置文件说明
May 30 #Javascript
Vue实现固定定位图标滑动隐藏效果
May 30 #Javascript
You might like
php公用函数列表[正则]
2007/02/22 PHP
令PHP初学者头疼十四条问题大总结
2008/11/12 PHP
PHP统计二维数组元素个数的方法
2013/11/12 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
基于Jquery的简单图片切换效果
2011/01/06 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
JS中Location使用详解
2015/05/12 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
Vue渲染函数详解
2017/09/15 Javascript
微信小程序实现下拉刷新动画
2019/06/21 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
python读写LMDB文件的方法
2018/07/02 Python
3分钟学会一个Python小技巧
2018/11/23 Python
Python可以实现栈的结构吗
2020/05/27 Python
如何让python的运行速度得到提升
2020/07/08 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
汽车专业人才自我鉴定范文
2013/12/29 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
《谁的本领大》教后反思
2014/04/25 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
十月围城观后感
2015/06/08 职场文书
浅谈Python数学建模之线性规划
2021/06/23 Python
Mysql 一主多从的部署
2022/05/20 MySQL