一、目录结构

二、配置方法

提示:和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. Docker之docker log详解

    1.显示所有log docker logs [OPTIONS] <CONTAINER>   #显示某个容器的所有log docker-compose logs  #显示启动的所有容器的lo ...

  2. 「雕爷学编程」Arduino动手做(18)---太阳能电池模块

    37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里 ...

  3. 微信小程序-视频弹幕的项目

    1.视频播放器 2.选择弹幕颜色 3.弹幕来了... 一般微信小程序需要配置.wxml.wxss.js.json文件,所有接下来也是要配置这几个文件,请看下图: 第一:  index.wxml < ...

  4. 检查可执行App类型是否为executable (腾讯上线预审核报错)otool工具使用

    https://blog.csdn.net/lovechris00/article/details/81561627 查看IPA文件的路径 1,解压缩 xcode导出的xxx.ipa文件 2,然后在解 ...

  5. bzoj1497最大闭权图基础题

    1497: [NOI2006]最大获利 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 5485  Solved: 2661[Submit][Status] ...

  6. MySQL知识-MySQL同版本多实例的配置

    MySQL多实例的配置 1. 创建需要目录 [root@db01 ~]# rm -rf /data/330{7..9}/data/*[root@db01 ~]# rm -rf /binlog/330{ ...

  7. APP定位元素之UiSelector

    1.UiSelector 类介绍 功能:通过各种属性与节点关系定位组件 操作步骤:找到对象->操作对象 2.四中匹配关系的介绍 (1)完全匹配 (2)包含匹配 (3)正则匹配 (4)起始匹 例子 ...

  8. Mysql的一次查询的过程

    1.用户发起请求,这里往往时多线程并发访问 2.去数据库线程池拿数据库链接,如果没有线程池,每次访问都要和数据库建立一次连接,非常耗时,效率低下 3.数据库层面上来说,可能会有多个系统同时访问它,所以 ...

  9. 创建执行线程方式三:实现Callable接口

    Callable接口 ① Java 5.0 在 java.util.concurrent 提供了一个新的创建执行 线程的方式:Callable 接口② Callable 接口类似于 Runnable, ...

  10. 03 . Python入门之运算符

    一.什么是运算符? 举个简单的例子** 4 +5 = 9 . 例子中,4** 和 5 被称为操作数,"+" 称为运算符. Python语言支持以下类型的运算符: [算术运算符] [ ...