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 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
js 获取Listbox选择的值的代码
Apr 15 Javascript
js中获取事件对象的方法小结
Mar 13 Javascript
Jquery 的outerHeight方法使用介绍
Sep 11 Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
Sep 18 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
javascript入门之数组[新手必看]
Nov 21 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
Vue.js实现立体计算器
Feb 22 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
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
浅析JS刷新框架中的其他页面 && JS刷新窗口方法汇总
2013/07/08 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
jquery列表拖动排列(由项目提取相当好用)
2014/06/17 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
vue使用screenfull插件实现全屏功能
2020/09/17 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
python标准库os库的函数介绍
2020/02/12 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
学生周末回家住宿长期请假条
2014/02/15 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
新学期主题班会
2015/08/17 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python