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. Spring boot+Thymeleaf传参跳转

    $.ajax(): $.ajax({ type: "get", url:"/public/inform", async: true, data: detailJ ...

  2. numpy.bincount正确理解

    今天看了个方法,numpy.bincount首先官网文档: numpy.bincount numpy.bincount(x, weights=None, minlength=0) Count numb ...

  3. python opencv:代码执行时间计算

    t1 = cv2.getTickCount() # ...... t2 = cv2.getTickCount() # 计算花费的时间:毫秒 time = (t2-t1) / cv2.getTickFr ...

  4. WinForm开发(1)——DataGridView控件(1)——C# DataGridView控件用法介绍

    DataGridView控件在实际应用中非常实用,特别需要表格显示数据时.可以静态绑定数据源,这样就自动为DataGridView控件添加相应的行.假如需要动态为DataGridView控件添加新行, ...

  5. Spring Boot JDBC 使用教程

    总是要用到数据库的嘛,曾经我一度以为,写代码,编程就是搞数据库增删改查,甚至你设计一个系统,大部分时候在为如何设计关系型数据库努力,究其原因,是因为关系型数据库是逻辑的主要呈现. 这个系列,主要是对 ...

  6. 吴裕雄 PYTHON 神经网络——TENSORFLOW 滑动平均模型

    import tensorflow as tf v1 = tf.Variable(0, dtype=tf.float32) step = tf.Variable(0, trainable=False) ...

  7. 最全面的C/C++编码规范总结

    C语言是面向过程的,而C++是面向对象的 对于不同的编程语言来说,具体的编码规范可以有很大的不同,但是其宗旨都是一致的,就是保证代码在高质量完成需求的同时具备良好的可读性.可维护性.例如我们可以规定某 ...

  8. 【转】django 三件套(render,redirect,HttpResponse)

    Django基础必备三件套**: HttpResponse 内部传入一个字符串参数,返回给浏览器. from django.shortcuts import HttpResponse def inde ...

  9. Python学习第二十课——自定property and classmethod

    自定制property class Lazyproperty: def __init__(self,func): # print('==========>',func) self.func=fu ...

  10. Edge Beta Android版更新已启用新图标

    导读 微软Edge Beta Android版更新已启用新图标设计 IT之家消息 适用于Android的Microsoft Edge Beta已于近日获得更新,最显著的特征就是使用了新图标设计.该图标 ...