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. STUN和TURN协议解析

    在现实Internet网络环境中,大多数计算机主机都位于防火墙或NAT之后,只有少部分主机能够直接接入Internet.很多时候,我们希望网络中的两台主机能够直接进行通信,即所谓的P2P通信,而不需要 ...

  2. web.xml中的welcome-file-list标签作用

    welcome-file-list是一个配置在web.xml中的一个欢迎页,用于当用户在url中输入项目名称或者输入web容器url(如http://localhost:8080/)时直接跳转的页面. ...

  3. 18 JavaScript字符串方法

    indexOf():从头到尾进行检索.返回指定文本在字符串最后一次出现的索引,否则返回-1.可以指定第二个参数作为起始位置. lastIndexOf:从尾到头进行检索.返回指定文本最后出现的位置,否则 ...

  4. Fiddler过滤VsHub请求

    Fiddler过滤掉VS2015 VsHub请求 打开VS2015, Tools --> Options --> Debugging --> General --> unche ...

  5. 安装pytorch

    安装cpu版本的 conda install pytorch-cpu torchvision-cpu -c pytorch 安装gpu版本的 conda install pytorch torchvi ...

  6. 结对编程任意Android App Demo

    一.产品说明 1.编写目的:用于获取百度图标. 2.情景设计:本产品用于展示图标.随着21世纪各类元素的普及,大部分的人群想下载各类网站的图标,也为了方便用户更便捷的下载而开发的. 3.Demo主要实 ...

  7. 修复GRUB引导故障!

    故障原因:MBR中的GRUB引导程序遭到破坏,grub.conf文件丢失,引导配置有误 故障现象:系统引导停滞,显示“grub>”提示符 解决思路:若无MBR备份,进入急救模式,重新安装grub ...

  8. 01背包第k最优解

    附题目链接:Bone Collector II Input The first line contain a integer T , the number of cases.Followed by T ...

  9. Java直通车——类与对象篇

    一.面向对象 教师节来临,一群小学生应召出黑板报,该怎样完成呢?对于一个小孩子来说,你告诉他:“我们要确定黑板报主题.明确内容要旨.搜寻具体内容.构思版面布局.画图和写字.安排人员后勤辅助.”他可能会 ...

  10. JavaScript - 运行机制,作用域,作用域链(Scope chain)

    参考 https://www.jianshu.com/p/3b5f0cb59344 https://jingyan.baidu.com/article/4f34706e18745be386b56d46 ...