浅谈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 相关文章推荐
arguments对象
Nov 20 Javascript
jQuery 图像裁剪插件Jcrop的简单使用
May 22 Javascript
jquery 简单的进度条实现代码
Mar 11 Javascript
jqGrid读取选择的多行的某个属性代码
May 18 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
Javascript函数式编程简单介绍
Oct 11 Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
薪资那么高的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
第五节--克隆
2006/11/16 PHP
PHP 读取和编写 XML
2014/11/19 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
表格 隔行换色升级版
2009/11/07 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
Python切片工具pillow用法示例
2018/03/30 Python
python实现扫描ip地址的小程序
2019/04/16 Python
在python中画正态分布图像的实例
2019/07/08 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
如何通过python检查文件是否被占用
2020/12/18 Python
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
三年大学生活自我鉴定
2014/01/21 职场文书
法制报告会主持词
2014/04/02 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
2014党员民主评议个人思想剖析发言
2014/09/19 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
python库sklearn常用操作
2021/08/23 Python