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. 谁需要GUI?快看Linux 终端生存之道

    完全在 Linux 终端中生存并不容易,但这绝对是可行的. 处理常见功能的最佳 Linux shell 应用 你是否曾想像过完完全全在 Linux 终端里生存?没有图形桌面,没有现代的 GUI 软件, ...

  2. GPTL—练习集—006树的遍历

    #include<bits/stdc++.h> using namespace std; typedef int daTp;//datatype typedef struct BTNode ...

  3. 1745 Divisibility

    Divisibility Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 14084 Accepted: 4989 Descrip ...

  4. 日常开发中常用的linux命令

    本文并不将linux的常用命令全部罗列出来,列出一下常用.容易忘记的命令. 更详细的说明见:https://www.cnblogs.com/xuxinstyle/p/9609551.html 文件相关 ...

  5. python(For 循环语句)

    一.For循环 Python for 循环可以遍历任何序列的项目,如一个列表或者一个字符串或者字典等. 语法模式:for var in sequence: (1)从某个集合(列表等)里顺次取值 #遍历 ...

  6. JavaScript toFixed() 实现四舍五入保留两位小数

    const num = 18.186; let result; result = num.toFixed(2) console.log(result) // 18.19 注意,返回值为String类型

  7. centos安装libconfig

    安装很简单,生成的.so文件会被安装到/usr/local/lib目录,记得修改/etc/profile. 安装过程会出现两个错误: What is makeinfo, and how do I ge ...

  8. OpenCV 4下darknet修改

    darknet的安装使用直接在官网上获取.https://pjreddie.com/darknet/ 但我用的是OpenCV4.1.1,make时会在image_opencv.cpp中有两个错误. 1 ...

  9. B. Phoenix and Beauty(贪心构造)

    \(给定序列长n的数组和k.完美数组的定义是数组中每一个连续k项的子段和为定值\) \(现在要求插入一些数使得数组满足条件,输出你构造的新数列.\) \(\color{Red}{----------- ...

  10. 线段树 G - Mayor's posters 小技巧

    G - Mayor's posters POJ - 2528 这个题目要倒着来写,从后面往前面贴,因为前面的有些会被后面的覆盖. 所以我们就判断这张海报的位置有没有完全被覆盖,如果完全被覆盖了就不能贴 ...