cli-4的脚手架配置

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

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

代码如下

  1. const path = require('path')
  2. module.exports = {
  3. configureWebpack: (config) => {
  4. Object.assign(config, {
  5. resolve: {
  6. alias: {
  7. '@': path.resolve(__dirname, './src')
  8. }
  9. }
  10. })
  11. }
  12. }

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

  1. 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. 简单oracle查询语句转换为mongo查询语句

    可以将简单的单表查询语句转换成Mongo过滤条件 列: 1. db.demo.aggregate([ {"$match": {"$and": [{"p ...

  2. 【渗透测试】Squirrelmail远程代码执行漏洞+修复方案

    最近网上有点不太平,爆出各种漏洞,等下会把近期的漏洞复现一下,发出来.安全圈的前辈总是默默的奉献,在这里晚辈们只能站在巨人的肩膀上,跟紧前辈们的步伐,走下去. -------------------- ...

  3. 进程作业管理2-kill,前后台作业,并行执行

    kill命令:向进程发送控制信号,以实现对进程管理,每个信号对应一个数字,信号名称以SIG开 头(可省略),不区分大小写 显示当前系统可用信号: kill –l   或者  trap -l 常用信号: ...

  4. 热部署简介及在eclipse安装插件JRebel进行热部署

    一.热部署简介 1.热部署与热加载在应用运行的时候升级软件,无需重新启动的方式有两种,热部署和热加载.它们之间的区别是:(1).部署方式: 热部署在服务器运行时重新部署项目.热加载在运行时重新加载cl ...

  5. Composer包收录

    doctrine/annotations #注解 nesbot/carbon #日期和时间处理 gregwar/captcha symfony/console nikic/fast-route #路由 ...

  6. 树莓派4B踩坑指南 - (12)谷歌浏览器书签同步

    书签和插件不能同步真的是不方便..使用时删掉※符号 过程比较复杂,坑很多,但确认有效 免费访问说明: https://github.com/max2max/fre※es※s 软件安装 https:// ...

  7. 详解python的字符编码问题

    一:什么是编码 将明文转换为计算机可以识别的编码文本称为“编码”.反之从计算机可识别的编码文本转回为明文为“解码”. 那么什么是明文呢,首先我们从一段信息说起,消息以人们可以理解,易懂的表示存在,我们 ...

  8. 06-常见的RAID技术

    目录 06-常见的RAID技术 参考 RAID基本概念 RAID数据组织形式 RAID数据保护方式 RAID0 RAID1 RAID5 RAID6 混合RAID - RAID 10 06-常见的RAI ...

  9. 集成PHP应用和SOLR

    集成 PHP 应用和 Solr 搜索引擎 您的评价:          收藏该经验       你为什么需要搜索引擎?单纯数据库不够用?如果你只是创建小网站,数据库就够了.但当你创建中性或大型应用的时 ...

  10. CSS - 精灵Sprite

    1. CSS精灵是一种处理网页背景图像的方式. 2. 它将一个页面涉及到的所有零星背景图像都集中到一张大图中去,然后将大图应用于网页,这样,当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像 ...