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 相关文章推荐
重定向实现代码
Nov 20 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 Javascript
微信小程序实现红包雨功能
Jul 11 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 Javascript
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
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
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
BBS(php & mysql)完整版(五)
2006/10/09 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
javascript+xml技术实现分页浏览
2008/07/27 Javascript
javascript call方法使用说明
2010/01/11 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
JS & JQuery 动态添加 select option
2016/06/08 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
Python中endswith()函数的基本使用
2015/04/07 Python
python 文件操作删除某行的实例
2017/09/04 Python
详解Python中的测试工具
2019/06/09 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
关于numpy数组轴的使用详解
2019/12/05 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
会计与审计专业大专生求职信
2013/10/03 职场文书
写自荐信要注意什么
2013/12/26 职场文书
食品流通安全承诺书
2014/05/22 职场文书
超市客服工作职责
2014/06/11 职场文书
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS