一、目录结构

二、配置方法

提示:和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. python 机器学习(一)机器学习概述与特征工程

      一.机器学习概述 1.1.什么是机器学习? 机器学习是从数据中自动分析获得规律(模型),并利用规律对未知数据进行预测 1.2.为什么需要机器学习? 解放生产力,智能客服,可以不知疲倦的24小时作业 ...

  2. 用C++验证三门问题

    三门问题(换门): #include <iostream> #include <cstdlib> #include <ctime> #define random(a ...

  3. ftp服务器搭建(二)

    1.已经安装好了vsftpd  进入到根目录下的/etc目录 ls查看一下 2.拷贝一下上面的两个配置文件 我拷贝到了我新建的目录中了 3.查看现在的网络连接方式——我的是-net方式 当然其他方式也 ...

  4. 枚举 转化为可行性判定问题 网络流 poj3189

    Steady Cow Assignment Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6914   Accepted: ...

  5. Maven、Gradle 配置国内镜像源

    Maven 全局配置 修改 Maven 默认的全局配置文件: 类 Unix 系统: Mac OS / Linux 默认在 ~/.m2/settings.xml Windows 系统:一般在 Maven ...

  6. vscode格式化Vue出现的问题:单引号变双引号 格式化去掉分号

    学习vue框架时,发现在使用vscode格式化vue代码时,出现单引号变成了双引号问题(导致和EsLint要求不一致),从而导致报错!!!!好坑啊!!! 解决方法如下 在文件根目录下创建 .prett ...

  7. Robot Framework(2)- 快速安装

    如果你还想从头学起Robot Framework,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1770899.html 安装RF cmd ...

  8. vue移动端转场动画

    vue移动端转场动画 1.介绍:使用vue移动端做项目的时候,为了用户的体验良好,我们需要页面有一种进入和转出的效果 // 在App.vue根组件中 <template> <div ...

  9. MySQL常见6个考题在实际工作中的运用

    题目一 MyISAM和InnoDB的区别,什么时候选择MyISAM 参考回答 InnoDB是目前MySQL主流版本(5.6.5.7.8.0)默认的存储引擎,支持事务.外键.行级锁,对于并发条件下要求数 ...

  10. APP元素定位和操作

    webdriver 提供了八种元素定位方法: 在 Python 语言中对应的定位方法如下:find_element_by_id()find_element_by_name()find_element_ ...