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 相关文章推荐
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
javascript中直接写php代码的方法
Jul 31 Javascript
浅析JavaScript中的delete运算符
Nov 30 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
JS实现拖动滚动条评分的效果代码分享
Sep 29 Javascript
js制作支付倒计时页面
Oct 21 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
详解mpvue中小程序自定义导航组件开发指南
Feb 11 Javascript
javascript触发模拟鼠标点击事件
Jun 26 Javascript
浅谈JS的原型和原型链
Jun 04 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
Syphon 使用方法
2021/03/03 冲泡冲煮
解析php中array_merge与array+array的区别
2013/06/21 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
jQuery 动态酷效果实现总结
2009/12/27 Javascript
javascript 二维数组的实现与应用
2010/03/16 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
JQuery显示、隐藏div的几种方法简明总结
2015/04/16 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
Vuex中mutations与actions的区别详解
2018/03/01 Javascript
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
了解重排与重绘
2019/05/29 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
Python 自动化表单提交实例代码
2017/06/08 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
对Django外键关系的描述
2019/07/26 Python
python中如何使用insert函数
2020/01/09 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
日语翻译个人求职的自我评价
2013/10/14 职场文书
四年的个人工作自我评价
2013/12/10 职场文书
旷课检讨书大全
2014/01/21 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
2014年就业工作总结
2014/11/26 职场文书
立春观后感
2015/06/18 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技