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. if __name=='__main__"的作用

    1.__main__的作用 我们可以经常在不同的程序和脚本中看到有这样的代码: if __name__=='__main__':#如果在windows上启动线程池,必须要使用. func() 很多情况 ...

  2. php安装igbinary扩展(windows)

    pecl.php.net 是php的扩展仓库,访问此网站后,搜索需要安装的扩展,截图如下: igbinary: http://pecl.php.net/package/redis github的网址: ...

  3. JSP、ASP、PHP Web应用程序怎么这么多P!

    之前我们说完了计算机网络应用程序的两种结构:C/S,B/S(传送门)今天我们详细说一说B/S开发中的这么多P是干什么的. 1.什么是Web应用程序 一个Web应用程序是由完成特定任务的各种Web组件( ...

  4. 数据结构--链式栈--C++实现

    #include <iostream> using namespace std; template<class T>class Stack { private: struct ...

  5. 谷歌OKR指导手册 (译)

    这是一本关于 OKR 迷你小册子,名为<google OKR playbook>,由 www.whatMatters.com 网站发布. 该网站由John Doerr 团队经营, 而Joh ...

  6. Python+Typora博客图片上传

    简介 用Typora 写Markdown 1年多了,这个编辑器的确很好用,但就是写完博客复制到博客园时要一个个手动插替换图片非常麻烦.后来发现最新版的Typora 已经支持图片上传功能,在 设置-图像 ...

  7. IDEA破解,自动激活【2020年版本也可以破解】

    破解 在破解之前,需要下载的文件有两个ideaIU-2019.3.3.exe.jetbrains-agent-latest.zip,前者是程序安装包,后者是破解补丁包(PS:补丁包里面有使用说明,下面 ...

  8. MATLAB矩阵的表示

    矩阵是matlab中最基本的数据对象. l  矩阵的建立 l  冒号表达式 l  结构矩阵和单元矩阵 1.矩阵的建立 (1)利用直接输入法建立矩阵:将矩阵的元素用中括号括起来,按矩阵行的顺序输入各元素 ...

  9. 001_python变量,if,while

    Python介绍 python的出生与应用 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆(中文名字:龟叔)为了在阿姆斯特丹打发时间, ...

  10. Qt插件系统

    说明 近期入职新公司,新公司的项目用到了Qt的插件系统,花时间了解了一下,还以为Qt的插件系统有多么高级呢,原来归根到底还是 dll 的动态调用时获取其中的类那一招啊,原理和之前的文章<DLL的 ...