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. 《名侦探柯南》动画登陆bilibili

    不管你看没看过.喜不喜欢,也一定听说过<名侦探柯南>这部动画,它和<火影>.<海贼王>几部动画陪伴了一代人成长的道路,而且<名侦探柯南>还是这几部动画中 ...

  2. Modbus TCP协议说明

    协议帧 事物处理标识| 协议标识| 长度| 从机地址| 功能码| 数据 0x00 00| 0x00 00| 0x00 08| 0x01| 0x0F| 0x00 14 0x00 01 0x01 0x01 ...

  3. pod setup命令失败解决方法

    最近运行pod setup出现以下问题: remote: Compressing objects: 100% (34/34), done.error: RPC failed; curl 56 SSLR ...

  4. 怎么查看当前的git分支是基于哪个分支创建的?

    2019独角兽企业重金招聘Python工程师标准>>> Question: 比如从 branch A 切出一个 branch B 然后对branch B做了一系列的操作 然后忘记了b ...

  5. ip地址与运算 ipcalc命令

    http://man.linuxde.net/ipcalc 转载于:https://blog.51cto.com/sonlich/2064133

  6. C++条件分支结构

    一.对于近期学习知识点的摘要: 1. 从第一个.cpp文件谈起, #include<iostream> //头文件 using namespace std; //使用命名空间,namesp ...

  7. 数据库SQL语言从入门到精通--Part 3--SQL语言基础知识

    数据库从入门到精通合集(超详细,学习数据库必看) 一.关系 单一的数据结构----关系 现实世界的实体以及实体间的各种联系均用关系来表示 逻辑结构----二维表 从用户角度,关系模型中数据的逻辑结构是 ...

  8. P5960 差分约束算法模板

    差分约束 差分约束,一般用来解决有\(n\)个未知数,\(m\)个不等式方程的问题,形如: \[\begin{cases} \ x_{a_1}-x_{b_1}\leq y_1\\ \ x_{a_2}- ...

  9. RobotFrameWork 自动化环境搭建(基于 python3.6)

    一.需要安装的工具目录 安装 python3.6.0 我这里采用的是 python3.6 (目前慢慢市场在推广 python3.0 版本了) 安装 wxPython(Python 非常有名的一个GUI ...

  10. 一个简单的wed服务器SHTTPD(1)————命令行和文件配置解析

    开始学习<LInux网络编程>中的综合案例,虽然代码书上有,还是自己打一下加深理解和印象. 主要有两个函数,完成命令行的解析,另一个实现配置文件的解析,注释还是比较丰富的哦. //star ...