cli-4的脚手架配置

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

首先在最外层,和package.json同级目录里面新建一个vue.config.js作为扩展配置。

代码如下

const path = require('path')
module.exports = {
configureWebpack: (config) => {
Object.assign(config, {
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
}
})
}
}

  标红的就是路径重定义。__dirname是总文件的目录路径必须要引入

const path = require('path'),然后再使用path.resolve方法

vue配置config ‘./.../.../***/**.vue’路径别名的更多相关文章

  1. vue项目中的路径别名

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

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

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

  3. vue项目,webpack中配置src路径别名及使用

    1.项目结构: 2.在build文件夹下的webpack.base.conf.js文件中设置src的路径别名. 3.在js文件或者vue文件的script标签中使用: (1).js文件中导入示例: ( ...

  4. vue中config/index.js:配置的详细理解

    当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) var path = require('path') ...

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

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

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

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

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

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

  8. 前端笔记之Vue(一)初识SPA和Vue&webpack配置和vue安装&指令

    一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会 ...

  9. typescript项目配置路径别名(路径映射)

    在vue项目中,我们可以利用“@”来指代src目录,在普通webpack项目中,我们也可以通过配置webpack的config来指定路径别名,但是在typescript+webpack项目中我们该怎么 ...

随机推荐

  1. P1579

    AC: #include <bits/stdc++.h> using namespace std; #define rep(i, a, b) for(int i = a; i < b ...

  2. BFS(广度优先搜索遍历保存全局状态,华容道翻版做法)--08--DFS--蓝桥杯青蛙跳杯子

    题目描述 X星球的流行宠物是青蛙,一般有两种颜色:白色和黑色. X星球的居民喜欢把它们放在一排茶杯里,这样可以观察它们跳来跳去. 如下图,有一排杯子,左边的一个是空着的,右边的杯子,每个里边有一只青蛙 ...

  3. dapper基本操作

    https://www.cnblogs.com/vichin/p/9289969.html

  4. Python学习笔记:变量

    什么是变量? 一般的理解是,变量是一个存储数据的容器 但是在python中的变量只存储数据的引用 变量的特性: 并不直接存储数据,而是引用着某个具体的数据 我们可以人为改变这个引用 定义变量 方式 变 ...

  5. day46_Webservice学习笔记_02

    一.回顾昨天所学 什么是webservice?    什么是远程调用技术?答:系统和系统之间的调用,从远程系统当中获取业务数据.    Webservice是web服务,他是用http传输SOAP协议 ...

  6. sort、uniq 、 join 、 comm、diff 、 patch 、df、du 和 time 命令的用法

    1 sort 命令 同文本文件打交道时,总避不开排序,那是因为对于文本处理任务而言,排序(sort)可以起到不小的作用.sort 命令能够帮助我们对文本文件和 stdin 进行排序操作.通常,它会结合 ...

  7. 从数组A中删除在数组B中存在的元素,用C语言实现

    从数组A中删除在数组B中存在的元素,用C语言实现 考验数组操作的能力,C语言的熟练程度. //功能:从数组A中删除在数组B中也存在的数据 //输入:arrA --- 数组A // lenA --- 数 ...

  8. mac 终端连接服务器报错

    今天在连接虚拟机服务器时突然报了一个 WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!的错误.  会出现这个错误的原因是在第一次进行SSH连接时,会生 ...

  9. iOS之Xcode提交App中断出现:Cannot proceed with delivery: an existing transporter instance is currently uploading this package

    https://www.jianshu.com/p/6d465a0ea58e 这句英文翻译过来就是: 无法继续交付:现有的传输程序实例目前正在上载此包 原因:上传的动作被记录在UploadToken中 ...

  10. GCD的常用代码块

    一.队列 1.获取全局的并发队列 dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, ...