一、目录结构

二、配置方法

提示:和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. Bash Shell之内建命令和保留字

    转载自:http://blog.chinaunix.net/uid-25880122-id-2941630.html 命令 含义 ! 保留字,逻辑非 : 不做任何事,只做参数展开 . 读取文件并在sh ...

  2. EOS基础全家桶(十二)智能合约IDE-VSCode

    简介 上一篇我们介绍了EOS的专用IDE工具EOS Studio,该工具的优势是简单,易上手,但是灵活性低,且对系统资源开销大,依赖多,容易出现功能异常.那么我们开发人员最容易使用的,可能还是深度定制 ...

  3. express.static设置缓存

    之前因为服务器端脚本不大,都是直接手写,按请求文件后缀名设置cache-control的max-age. 今天决定还是改成express,发现原来express.static()方法设置缓存,直接在参 ...

  4. CPU 多核指令 —— WFE 原理【原创】

    转自:http://tinylab.org/arm-wfe/ Zhang Binghua 创作于 2020/05/19 打赏 微信公众号   知识星球 关注 @泰晓科技 与数千位一线 Linux 工程 ...

  5. 2.3 Go内置函数

    内置函数 Go 语言拥有一些不需要进行导入操作就可以使用的内置函数.它们有时可以针对不同的类型进行操作,例如:len.cap 和 append,或必须用于系统级的操作,例如:panic.因此,它们需要 ...

  6. 201771010128王玉兰《面向对象程序设计(Java)》第八周学习总结

    第一部分:理论知识部分总结 (1)接口:接口不是类,而是对类胡一组需求描述,由常量肯一组抽象方法组成. a:接口中不包括变量和有具体实现的方法 b:只要类实现了接口,则该类要遵从接口描述的统 一格式进 ...

  7. MySQL 8.0用户及安全管理

    用户的功能 登录数据库 管理数据库对象 用户的组成 用户名@'白名单' 白名单: % 10.0.0.10 .% 10.0.0.5% 10.0.0.0/255.255.254.0 oldguo.com ...

  8. Android | 超简单集成HMS ML Kit实现最大脸微笑抓拍

    前言   如果大家对HMS ML Kit 人脸检测功能有所了解,相信已经动手调用我们提供的接口编写自己的APP啦.目前就有小伙伴在调用接口的过程中反馈,不太清楚HMS ML Kit 文档中的MLMax ...

  9. 【HTTP】Web及网络基础&HTTP基础

    HTTP协议访问Web 一.大体访问过程 1. 浏览器地址栏输入URL 2. 浏览器从服务端获取文件资源 3. 浏览器显示Web页面 二.HTTP的版本历史 1. HTTP/0.9 没有作为正式的标准 ...

  10. Github自动打包并推送Nuget版本

    如何将自己的类库,自动打包并自动发布到Nuget? 1. 项目csproject属性修改 新建一个项目GitToNugetPackageTest 不用添加任何类,我们修改csproject属性. 替换 ...