1.在项目文件根目录上创建 vue.config.js 文件

2.写入以下代码,具体内容见注释:

const path = require('path') // 引入path模块
function resolve(dir) {
return path.join(__dirname, dir) // path.join(__dirname)设置绝对路径
}
module.exports = {
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('./src'))
.set('components', resolve('./src/components'))
.set('views', resolve('src/views'))
.set('assets', resolve('src/assets'))
// set第一个参数:设置的别名,第二个参数:设置的路径
}
}

VueCli4构建项目如何配置文件路径别名?的更多相关文章

  1. 让webstorm 识别vue cli3项目中的@路径别名

    在setting -> languages&frameworks -> webpack里选择配置文件路径为 node_modules/@vue/cli-service/webpac ...

  2. vue项目中的路径别名

    每次写引入组件的路径,如果路径嵌套比较深,那么会比较麻烦,我们可以在webpack.base.conf.js,中设置路径的别名,默认webpack设置src的别名为@ 建议配置src下一级目录的别名, ...

  3. Vue-Cli4.x配置文件路径别名

    一.目录结构 二.配置方法 提示:和package.json同级新建vue.config.js文件(可选文件,默认没有创建). const path = require('path');//引入pat ...

  4. typescript项目配置路径别名(路径映射)

    在vue项目中,我们可以利用“@”来指代src目录,在普通webpack项目中,我们也可以通过配置webpack的config来指定路径别名,但是在typescript+webpack项目中我们该怎么 ...

  5. "CreateProcess error=206, 文件名或扩展名太长。",用gradle构建项目创建mapper文件时提示这个错误,是Windows Gradle长类路径问题,官方已经修复

    用gradle构建项目mapper文件时,提示这个错误,这个是Windows Gradle长类路径问题, gradle官方已经解决了这个问题. 官网给出的解决方法地址:https://plugins. ...

  6. vue项目,webpack中配置src路径别名及使用

    1.项目结构: 2.在build文件夹下的webpack.base.conf.js文件中设置src的路径别名. 3.在js文件或者vue文件的script标签中使用: (1).js文件中导入示例: ( ...

  7. webpack进阶构建项目(一)

    webpack进阶构建项目(一) 阅读目录 1.理解webpack加载器 2.html-webpack-plugin学习 3.压缩js与css 4.理解less-loader加载器的使用 5.理解ba ...

  8. Java基础14:离开IDE,使用java和javac构建项目

    更多内容请关注微信公众号[Java技术江湖] 这是一位阿里 Java 工程师的技术小站,作者黄小斜,专注 Java 相关技术:SSM.SpringBoot.MySQL.分布式.中间件.集群.Linux ...

  9. SpringBoot系列——快速构建项目

    前言 springboot官方参考指南:https://docs.spring.io/spring-boot/docs/2.1.0.RELEASE/reference/htmlsingle/ Spri ...

随机推荐

  1. 【Linux常见命令】mv命令

    mv - move (rename) files mv命令用来为文件或目录改名.或将文件或目录移入其它位置. 语法: mv [OPTION]... [-T] SOURCE DEST mv [OPTIO ...

  2. Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转

    问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...

  3. mybatis源码学习(四):动态SQL的解析

    之前的一片文章中我们已经了解了MappedStatement中有一个SqlSource字段,而SqlSource又有一个getBoundSql方法来获得BoundSql对象.而BoundSql中的sq ...

  4. USACO Training Section 1.2 双重回文数 Dual Palindrom

    题目描述 如果一个数从左往右读和从右往左读都是一样,那么这个数就叫做"回文数".例如,12321就是一个回文数,而77778就不是.当然,回文数的首和尾都应是非零的,因此0220就 ...

  5. 图论--树的重心(DFS) 模板

    const int maxn=500005; int tot=0,n; int ans,size; int sx[maxn],head[maxn]; int vis[maxn]; struct edg ...

  6. Codeforce 1255 Round #601 (Div. 2)B. Fridge Lockers(思维)

    Hanh lives in a shared apartment. There are nn people (including Hanh) living there, each has a priv ...

  7. 图论--拓扑排序--判断是否为DAG图

    #include<cstdio> #include<cstring> #include<vector> #include<queue> using na ...

  8. asyncio异步编程【含视频教程】

    不知道你是否发现,身边聊异步的人越来越多了,比如:FastAPI.Tornado.Sanic.Django 3.aiohttp等. 听说异步如何如何牛逼?性能如何吊炸天....但他到底是咋回事呢? 本 ...

  9. libevent(八)激活事件

    激活事件添加流程 事件发生后,需要把对应的event加入到激活事件队列中. 整个流程如下: 对于定时器事件,在timeout_process过程中,会将事件从最小堆中删除. 激活事件处理流程 在eve ...

  10. 自动化运维工具Ansible之Tests测验详解

    Ansible Tests 详解与使用案例 主机规划 添加用户账号 说明: 1. 运维人员使用的登录账号: 2. 所有的业务都放在 /app/ 下「yun用户的家目录」,避免业务数据乱放: 3. 该用 ...