浅谈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 相关文章推荐
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
document.getElementBy("id")与$("#id")有什么区别
Sep 22 Javascript
js操作iframe父子窗体示例
May 22 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
全面解析Bootstrap手风琴效果
Apr 17 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
Oct 31 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 Javascript
10种JavaScript最常见的错误(小结)
Jun 21 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
PHP正确解析UTF-8字符串技巧应用
2012/11/07 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
doctype后如何获得body.clientHeight的方法
2007/07/11 Javascript
JavaScript 变量命名规则
2009/09/23 Javascript
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
关于vue面试题汇总
2018/03/20 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
python实现大转盘抽奖效果
2019/01/22 Python
Python父目录、子目录的相互调用方法
2019/02/16 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
keras 权重保存和权重载入方式
2020/05/21 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
python实现PolynomialFeatures多项式的方法
2021/01/06 Python
多重CSS背景动画实现方法示例
2014/04/04 HTML / CSS
美国休闲服装品牌:Express
2016/09/24 全球购物
美国保健品专家:Life Extension
2018/05/04 全球购物
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
分布式数据库需要考虑哪些问题
2013/12/08 面试题
程序员经常用到的UNIX命令
2015/04/13 面试题
应届生英语教师求职信
2013/11/05 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
廉政承诺书2015
2015/04/28 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS