浅谈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 相关文章推荐
js实现兼容IE6与IE7的DIV高度
May 13 Javascript
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
Javascript高级技巧分享
Feb 25 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
详解javascript实现瀑布流列式布局
Jan 29 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
Oct 24 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
区分vue-router的hash和history模式
Oct 03 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 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判断变量是否为0的方法
2014/02/08 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
2016/07/09 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
学习Vue组件实例
2018/04/28 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
在Django中限制已登录用户的访问的方法
2015/07/23 Python
win与linux系统中python requests 安装
2016/12/04 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
Python argparse模块应用实例解析
2019/11/15 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
详解Flask前后端分离项目案例
2020/07/24 Python
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
个人求职简历的自我评价范文
2013/10/09 职场文书
竞聘书模板
2014/03/31 职场文书
幼儿园安全责任书
2014/04/14 职场文书
政府个人对照检查材料
2014/08/28 职场文书
车辆年审委托书范本
2014/09/18 职场文书
公司离职证明标准范本
2014/10/05 职场文书
天下第一关导游词
2015/02/06 职场文书
Java基础-封装和继承
2021/07/02 Java/Android
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server