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 相关文章推荐
jQuery 中关于CSS操作部分使用说明
Jun 10 Javascript
Jquery 插件开发笔记整理
Jan 17 Javascript
JavaScript学习笔记记录我的旅程
May 23 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
Mar 27 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
第一篇初识bootstrap
Jun 21 Javascript
详解使用vuex进行菜单管理
Dec 21 Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 Javascript
Vue实现日历小插件
Jun 26 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 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
NT IIS下用ODBC连接数据库
2006/10/09 PHP
精通php的十大要点(上)
2009/02/04 PHP
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
js select常用操作控制代码
2010/03/16 Javascript
如何判断鼠标是否在DIV的区域内
2013/11/13 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
"序列点" 是什么
2016/07/29 面试题
应聘自荐书
2013/10/08 职场文书
超市创业计划书
2014/09/15 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
2019年妇科护士的自我鉴定(3篇)
2019/09/26 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers