打开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. 利用angular4和nodejs-express构建一个简单的网站(五)—用户的注册和登录-HttpClient

    上一节简单介绍了一下利用angular构建的主路由模块,根据上一节的介绍,主页面加载时直接跳转到用户管理界面,下面就来介绍一下用户管理模块.启动应用后,初始界面应该是这样的: 用户管理模块(users ...

  2. C++入门经典-例2.3-在print函数中使用附加符号

    1:代码如下: // 2.3.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" int main() { ; /*定义长整型变量,为其赋值*/ ...

  3. Uep弹窗showModalDialog的使用

    function imageMaintain() { $.showModalDialog($$pageContextPath + "uepI/imageMaintain.do?service ...

  4. python自然语言处理学习笔记2

    基础语法 搜索文本----词语索引使我们看到词的上下 text1.concordance("monstrous") 词出现在相似的上下文中 text1.similar(" ...

  5. CSS样式属性单词之Left

    通常left单独在CSS中设置无效,需要在使用position属性下使用才能生效起作用.left左靠多少距离(距离左边多少)的作用. left 一.left认识与语法 left翻译:左边,左 在CSS ...

  6. VS2017 中安装SVN

    VS2017 中安装SVN   1.下载:SVN For Vs2017 2.安装: 先关闭VS2017,找到下载文件,直接双击,安装. 3.启用插件 打开Vs2017,直接可用.

  7. Ubuntu 16.04下安装sublime Text的插件

    Sublime Text是什么: 它是一款具有代码高亮.语法提示.自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插件扩展机制,用她来写代码,绝对是一种享受.相比于难于上手的Vim,浮肿沉重 ...

  8. CentOS 5.5 安装 64位 Oracle 10g

    参考官方文档(随着数据库文件一起下载) Oracle® DatabaseQuick Installation Guide 10gRelease 2 (10.2) for Linux x86-64 官方 ...

  9. apache虚拟目录配置实例

    apache虚拟目录配置实例 一.首先,开启虚拟主机配置 在文件httpd.conf中找到: include conf/extra/httpd-vhosts.conf #开启 二.对httpd-vho ...

  10. Day03:运算符和表达式 / 分支结构

    Java 运算符 计算机的最基本用途之一就是执行数学运算,作为一门计算机语言,Java也提供了一套丰富的运算符来操纵变量.我们可以把运算符分成以下几组: 算术运算符 关系运算符 位运算符 字符串运算符 ...