打开build/webpack.base.conf.js

找到module.exports下的resolve这行

刚开始是这样的

  resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},

改成:

  resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'src': path.resolve(__dirname, '../src'),
'pages': path.resolve(__dirname, '../src/pages'),
'common': path.resolve(__dirname, '../src/common'),
'vendor': path.resolve(__dirname, '../src/vendor'),
'components': path.resolve(__dirname, '../src/components'),
}
},

然后你就可以在任意.vue文件,使用import xxxComponent from 'components/xxxComponent'

vue-cli设置引入目录的更多相关文章

  1. [Vue CLI 3] public 目录没用吗

    在 vue-cli 3 初始化的项目根目录下面:和 src 同级有一个 public 目录 官网的说明如下:https://cli.vuejs.org/zh/guid... 在下列情况下使用: 你需要 ...

  2. vue系列之vue cli 3引入ts

    插件 Vue2.5+ Typescript 引入全面指南 vue-class-component强化 Vue 组件,使用 TypeScript/装饰器 增强 Vue 组件 vue-property-d ...

  3. vue/cli 3 引入 使用jQuery

    注意这里配置的是vue-cli3.0引入jquery的方法,不是vue-cli2.0的配置方法 一.安装jquery npm install jquery --save 二.一般安装成功后在packa ...

  4. 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap

    1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...

  5. vue cli 3.x 设置4个空格缩进

    vue cli 3.x 设置4个空格缩进: 文件.editorconfig中,indent_size = 2修改为indent_size = 4 文件 .eslintrc.js 添加一行:'inden ...

  6. 【Vue CLI】从安装到构建项目再到目录结构的说明

    目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录 "Vue CLI是一个基于Vue.js进行快速 ...

  7. vue cli 3

    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...

  8. axios踩坑记录+拦截器使用+vue cli代理跨域proxy+webpack打包部署到服务器

    1.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一道 ...

  9. 用@vue/cli发布npm包

    1.环境准备 安装node,npm,@vue/cli 2.初始化项目 用@vue/cli创建新项目 vue create mtest-ui 删除public,main.js,App.vue等无关文件, ...

随机推荐

  1. MYSQL中NULL陷阱

    1.NULL值不能做比较,跟任何值比较,NULL值都不会被筛选出来 2.NULL值做数学运算后依旧为NULL,比如 SELECT 5 + NULL 结果为NULL,但是SELECT 5+ '' 结果为 ...

  2. 利用python的图像分块与拼接

    import os import matplotlib.pyplot as plt import cv2 import numpy as np def divide_img(img_path, img ...

  3. heigth innerheigt outerheight详解

    height() :height innerHeight(): height + paddingouterHeight(): height + padding + border outerHeight ...

  4. pandas dataframe类型操作

    用python做数据分析pandas库介绍之DataFrame基本操作   怎样删除list中空字符? 最简单的方法:new_list = [ x for x in li if x != '' ] 这 ...

  5. 浏览器端-W3School-HTML:HTML DOM Object 对象

    ylbtech-浏览器端-W3School-HTML:HTML DOM Object 对象 1.返回顶部 1. HTML DOM Object 对象 Object 对象 Object 对象代表 HTM ...

  6. Android 夜间模式的实现

    package com.loaderman.daynightdemo; import android.os.Bundle; import android.support.v7.app.AppCompa ...

  7. Java学习之==>JDBC

    一.概述 官方解释: JDBC(Java DataBase Connectivity,java数据库连接)是一种用于执行SQL语句的 Java API,可以为多种关系型数据库提供统一访问,它由一组用 ...

  8. Hibernate初了解

    Hibernate是一个开放源代码的对象关系映射框架, 它对JDBC进行了非常轻量级的对象封装,使得Java程序员可以随心所欲的使用对象编程思维来操纵数据库. Hibernate可以应用在任何使用JD ...

  9. yum升级python

    一,查看系统默认版本 [root@redhat7 ~]# python -VPython 2.7.5 二,安装依赖包 yum install epel-release -y 三,查看新版本 yum s ...

  10. Python基础知识思维导图|自学Python指南

    微信公众号[软件测试大本营]回复"python",获取50本python精华电子书. 测试/开发知识干货,互联网职场,程序员成长崛起,终身学习. 现在最火的编程语言是什么?答案就是 ...