一、目录结构

二、配置方法

提示:和package.json同级新建vue.config.js文件(可选文件,默认没有创建)。

const path = require('path');//引入path模块
function resolve(dir){
return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径
}
module.exports={
chainWebpack:(config)=>{
config.resolve.alias
.set('@',resolve('./src'))
.set('components',resolve('./src/components'))
.set('views',resolve('src/views'))
.set('assets',resolve('src/assets'))
//set第一个参数:设置的别名,第二个参数:设置的路径
    
}
}

Vue-Cli4.x配置文件路径别名的更多相关文章

  1. 【vue-cli 3.0】 vue.config.js配置 - 路径别名

    如何配置vue-cli 3中vue.config.js的路径别名? 前段时间更新电脑重装了一下vue-cli,发现了vue-cli已经更新到3.0版.用来搭建项目后发现简化了很多,而且配置文件现在可以 ...

  2. vue项目中的路径别名

    每次写引入组件的路径,如果路径嵌套比较深,那么会比较麻烦,我们可以在webpack.base.conf.js,中设置路径的别名,默认webpack设置src的别名为@ 建议配置src下一级目录的别名, ...

  3. vue.config.js添加路径别名

    在组件库中添加配置文件后其它文件需要引用它,此时想到利用路径的别名比较方便,相当于缩写了,请看下面的添加过程: (一)在vue.config.js文件中添加的内容如粗体字体所示: const path ...

  4. VueCli4构建项目如何配置文件路径别名?

    1.在项目文件根目录上创建 vue.config.js 文件 2.写入以下代码,具体内容见注释: const path = require('path') // 引入path模块 function r ...

  5. 让webstorm 识别vue cli3项目中的@路径别名

    在setting -> languages&frameworks -> webpack里选择配置文件路径为 node_modules/@vue/cli-service/webpac ...

  6. webstorm中不能识别react、vue alias 路径别名符号

    https://blog.csdn.net/weixin_37939942/article/details/89388466 因为我平时比较喜欢使用ws做开发,所以在使用vue或react的时候只要使 ...

  7. vue配置config ‘./.../.../***/**.vue’路径别名

    cli-4的脚手架配置 因为组件的引用,经常会遇到import * from  '../../../components/common/***.vue‘这样的引入格式,太复杂了,所以可以在vue里面配 ...

  8. 基于webpack的vue项目路径别名

    在vue的项目里,我们可以使用../这样的相对路径的方式引用不同目录的组件: import userinfo from '../../../components/userinfo.vue'; 使用.. ...

  9. Vue之vue中的data为什么是一个函数+vue中路径别名alias设置

    问题描述 为什么在vue组件中,我们的data属性必须是一个函数,new Vue()中的data除外,因为new Vue中只有一个data属性. 原因 因为我们能抽离出来的组件,肯定是具有复用性的,它 ...

随机推荐

  1. vue-cli搭建vue项目

    1 安装node,npm  npm i node npmnode -v npm -v 2 查看webpack版本,这里要注意,webpack如果为4.0,可能不兼容vue-cli 先卸载 npm un ...

  2. kubernetes pod的弹性伸缩———基于pod自定义custom metrics(容器的IO带宽)的HPA

    背景 ​ 自Kubernetes 1.11版本起,K8s资源采集指标由Resource Metrics API(Metrics Server 实现)和Custom metrics api(Promet ...

  3. A + B Problem(hdu1000)

    注意,认真读题目的Input要求,看看是输入一组测试数据还是输入多组测试数据.输入多组数据,不要忘记while(). #include<iostream> using namespace ...

  4. C语言数据类型整理

    基本类型: 它们是算术类型,包括两种类型:整数类型和浮点类型. 枚举类型: 它们也是算术类型,被用来定义在程序中只能赋予其一定的离散整数值的变量. void 类型: 类型说明符 void 表明没有可用 ...

  5. html浏览器高度和宽度和其他dom获取

    1.获取网页可见区域的宽度:document.body.clientWidth ; 2.获取网页可见区域的高度:document.body.clientHeight; 3.获取 网页可见区域宽:doc ...

  6. Xilinx的DocNav文件导航中的文档开头字母缩写都是什么意思?

    在安装Xilinx的开发软件后都会附带安装一个用于查阅Xilinx技术文档的文件导航工具DocNav. 在DocNav中可以找到几乎所有对我们开发Xilinx FPGA有用的技术文档,其中的文档数量更 ...

  7. 2020由浅入深最强Java面试题

    1.String,StringBuffer和StringBuilder有什么区别?     String是字符串常量,不可变对象,每次对String修改都等同于生成了一个新的String象,然后将指针 ...

  8. 阿里巴巴编码规范(Java)证明

    背景 阿里云上有个阿里巴巴编码规范认证,我估算一下时间成本很低,多个认证也没什么坏处,就花了1分钱报了个名.这个认证报名后就可以下载链接下的编码规范,然后参加个考试应该就OK了. 共48页的规范实际上 ...

  9. [Objective-C] 012_数据持久化_XML属性列表,NSUserDefaults

    在日常开发中经常要对NSString.NSDictionary.NSArray.NSData.NSNumber这些基本类的数据进行持久化,我们可以用XML属性列表持久化到.plist 文件中,也可以用 ...

  10. Java rmi漏洞利用及原理记录

    CVE-2011-3556 该模块利用了RMI的默认配置.注册表和RMI激活服务,允许加载类来自任何远程(HTTP)URL.当它在RMI中调用一个方法时分布式垃圾收集器,可通过每个RMI使用endpo ...