浅谈vue路径优化之resolve


Posted in Javascript onOctober 13, 2017

通过vue-cli来创建vue+webpack的项目时,已经有很多都配置好了,但是路径方面为了方便开发,还可以优化。

1. resolve.extensions

在webpack.base.conf.js中,我们可以看到resolve配置,其中的extengsions是一个数组,如下所示:

extensions: ['.js', '.vue', '.json'],

通过这样的配置,我们在组件中过着路由中应用组件时,就可以更为方便的应用,比如:

import Hello from '@components/Hello';

即Hello.vue这个组件我们不需要添加.vue后缀就可以引用到了,如果不用extensions, 我们就必须要用@components/Hello.vue来引入这个文件。

2. resolve.alias

在组件之间相互引用时,可能是下面这样的:

import Hello from '../src.components/Hello';

其中的路径是相对于当前页面的。 但是如果嵌套等更为复杂,那么写起来会比较麻烦。但是如果我们通过这样的配置:

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
   'vue$': 'vue/dist/vue.esm.js',
   '@pages': path.join(__dirname, "..", "src", "pages"),
   "@components": path.join(__dirname, "..", "src", "components"),
   // 注意: 静态资源通过src,不能这么设置。
   // "@assets": path.join(__dirname, "..", "src", "assets"),
  }

其中vue$表示引入vue,就可以像下面这么写:

import Vue from 'vue'

另外,对于@pages和@components我们就可以直接引用了,而省去了一大堆的复杂应用,另外通过@可以消除歧义。如下所示:

import Hello from '@components/Hello';
import App from '@pages/App'

值得注意的时: 在webpack.config.js中我们不能使用../ 以及./这种形式的路径方式,而是通过 path.join 和 __dirname 这种形式来表示路径,否则会报错。

另外: 在组件中,我们会引用一些静态文件,即static下的文件, 这时我们就不能用 alias 下的配置了,而必须使用一般的配置方式。

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

Javascript 相关文章推荐
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
Vue.js -- 过滤器使用总结
Feb 18 Javascript
关于Angularjs中跨域设置白名单问题
Apr 17 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 Javascript
webpack+vue.js构建前端工程化的详细教程
May 10 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
薪资那么高的Web前端必看书单
Oct 13 #Javascript
vue router demo详解
Oct 13 #Javascript
JS实现的简单表单验证功能示例
Oct 13 #Javascript
javascript基于定时器实现进度条功能实例
Oct 13 #Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 #Javascript
详解如何去除vue项目中的#——History模式
Oct 13 #Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 #Javascript
You might like
PHP 批量更新网页内容实现代码
2010/01/05 PHP
php实现的发送带附件邮件类实例
2014/09/22 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
php表单处理操作
2017/11/16 PHP
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
javscript对象原型的一些看法
2010/09/19 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
vue.js指令和组件详细介绍及实例
2017/04/06 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
react基本安装与测试示例
2020/04/27 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
Python编程实现蚁群算法详解
2017/11/13 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
为什么说python适合写爬虫
2020/06/11 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
python利用opencv实现颜色检测
2021/02/23 Python
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
初中生期末考试的自我评价
2013/12/17 职场文书
写给爸爸的道歉信
2014/01/15 职场文书
2014年财务科工作总结
2014/11/11 职场文书
人生遥控器观后感
2015/06/11 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python
整理Python中常用的conda命令操作
2021/06/15 Python
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android