Vue-Cli4.x配置文件路径别名
一、目录结构

二、配置方法
提示:和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配置文件路径别名的更多相关文章
- 【vue-cli 3.0】 vue.config.js配置 - 路径别名
如何配置vue-cli 3中vue.config.js的路径别名? 前段时间更新电脑重装了一下vue-cli,发现了vue-cli已经更新到3.0版.用来搭建项目后发现简化了很多,而且配置文件现在可以 ...
- vue项目中的路径别名
每次写引入组件的路径,如果路径嵌套比较深,那么会比较麻烦,我们可以在webpack.base.conf.js,中设置路径的别名,默认webpack设置src的别名为@ 建议配置src下一级目录的别名, ...
- vue.config.js添加路径别名
在组件库中添加配置文件后其它文件需要引用它,此时想到利用路径的别名比较方便,相当于缩写了,请看下面的添加过程: (一)在vue.config.js文件中添加的内容如粗体字体所示: const path ...
- VueCli4构建项目如何配置文件路径别名?
1.在项目文件根目录上创建 vue.config.js 文件 2.写入以下代码,具体内容见注释: const path = require('path') // 引入path模块 function r ...
- 让webstorm 识别vue cli3项目中的@路径别名
在setting -> languages&frameworks -> webpack里选择配置文件路径为 node_modules/@vue/cli-service/webpac ...
- webstorm中不能识别react、vue alias 路径别名符号
https://blog.csdn.net/weixin_37939942/article/details/89388466 因为我平时比较喜欢使用ws做开发,所以在使用vue或react的时候只要使 ...
- vue配置config ‘./.../.../***/**.vue’路径别名
cli-4的脚手架配置 因为组件的引用,经常会遇到import * from '../../../components/common/***.vue‘这样的引入格式,太复杂了,所以可以在vue里面配 ...
- 基于webpack的vue项目路径别名
在vue的项目里,我们可以使用../这样的相对路径的方式引用不同目录的组件: import userinfo from '../../../components/userinfo.vue'; 使用.. ...
- Vue之vue中的data为什么是一个函数+vue中路径别名alias设置
问题描述 为什么在vue组件中,我们的data属性必须是一个函数,new Vue()中的data除外,因为new Vue中只有一个data属性. 原因 因为我们能抽离出来的组件,肯定是具有复用性的,它 ...
随机推荐
- React实践:自定义html特性不显示
发现React中自定义的html特性在render后是不现实,而且getAttribute方法也只能获取到undefined. 后来去stackoverflow提问,网友回答说: It depends ...
- vue中使用mixins
Mixins (混合或混入)——定义的是一个对象 1.概念:一种分发Vue组件可复用功能的非常灵活的方式.混入对象可以包含任意组件选项(组件选项:data.watch.computed.methods ...
- SQL拦截器
一.拦截SQL 1.slow log 2.general log 3.mycat sql拦截器 二.mycat sql拦截器 1.配置server.xml # 1.5可用 <system> ...
- Spring的bean创建方式ref使用方法
java public class UserServiceImp implements UserService{ private UserDao userDao =null; public void ...
- MongoDB -MSC集群的部署
一.Shard节点配置过程 1. 目录创建:mkdir -p /mongodb/38021/conf /mongodb/38021/log /mongodb/38021/datamkdir -p ...
- ASP.NET Core Blazor Webassembly 之 组件
关于组件 现在前端几大轮子全面组件化.组件让我们可以对常用的功能进行封装,以便复用.组件这东西对于搞.NET的同学其实并不陌生,以前ASP.NET WebForm的用户控件其实也是一种组件.它封装ht ...
- 计划任务工具-windows
计划任务工具根据自己设定的具体时间,频率,命令等属性来规定所要执行的计划. 代码 # -*- coding: utf-8 -*- """ Module implement ...
- 小工具之apk黑屏自动检测
在打包测试的时候经常发送给测试组之后,发现已进入游戏就黑屏,这个就浪费了测试组的精力,如果要测试多款产品的话,就会因为黑屏问题做很多无用功,这是程序就需要在发给测试的时候自己先测试产品会不会黑屏.同样 ...
- BUUCTF WEB
BUUCTF 几道WEB题WP 今天做了几道Web题,记录一下,Web萌新写的不好,望大佬们见谅○| ̄|_ [RoarCTF 2019]Easy Calc 知识点:PHP的字符串解析特性 参考了一下网 ...
- Spring boot Sample 007之spring-boot-log4j2
一.环境 1.1.Idea 2020.1 1.2.JDK 1.8 二.目的 spring boot 整合多环境log4j2 三.步骤 3.1.点击File -> New Project -> ...