浅谈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中的escape及unescape函数的php实现代码
Sep 04 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
node.js中的fs.realpathSync方法使用说明
Dec 16 Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 Javascript
JS判断数组里是否有重复元素的方法小结
May 21 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 Javascript
用webAPI实现图片放大镜效果
Nov 23 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结合表单实现一些简单功能的例子
2011/06/04 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
javascript版2048小游戏
2015/03/18 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
js实现抽奖效果
2017/03/27 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
详解Python中的日志模块logging
2015/06/19 Python
深入理解Python中变量赋值的问题
2017/01/12 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
python障碍式期权定价公式
2019/07/19 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
python开发入门——列表生成式
2020/09/03 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
网上开商店的创业计划书
2014/01/19 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
Selenium浏览器自动化如何上传文件
2022/04/06 Python