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. Java语言和C++语言的差异

    Java采用了C及C++的语法格式,对于学习过C及C++的程序设计者来说,学习Java将有可能很轻松.但是,如果仔细检查Java语言的许多细节,就会发现Java取消了不少C及C++的特性,并且加入了一 ...

  2. Jdbc批处理一点异同

    同样的代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 public class TestBatch {   public stati ...

  3. Clickhouse 条形图📊函数展示

    Clickhouse 条形图

  4. lua 发送http请求

    lua发送http请求,luajit默认没有http.lua库,需要下载并存放到luajit对应目录. 一.下载http.lua和http_headers.lua库 参考:https://www.zi ...

  5. CS Requirements and Resources

    有感于国内令人发指的CS教育,决定以自学为主. 路线会按照计算机科学与技术的技能树,主要学习四大的比较完整的课程,video没时间看,但reading会仔细看.lab会认真做,对于一些比较有意义.代码 ...

  6. Hardware Introduction

    计算机硬件组成可以概括为下图: CPU CPU生产商主要是Intel和AMD. Intel的产品主要有四种: Celeron(赛扬):低端处理器 Pentium(奔腾):比赛扬强,比酷睿弱 Xeon( ...

  7. CtsSecurityTestCases#ListeningPortsTest定位tcp端口与pid

    CtsSecurityTestCases#ListeningPortsTest定位tcp端口与pid [问题描述] cts失败项 armeabi-v7a CtsSecurityTestCases an ...

  8. Jmeter系列(10)- 阶梯加压线程组Stepping Thread Group详解

    如果你想从头学习Jmeter,可以看看这个系列的文章哦 https://www.cnblogs.com/poloyy/category/1746599.html 前言 Stepping Thread ...

  9. F - Watching Fireworks is Fun

    C. Watching Fireworks is Fun 题目大意: 一个城镇有n个区域,从左到右1-n,每个区域之间距离1个单位距离.节日中有m个烟火要放,给定放的地点a[ i ].时间t[ i ] ...

  10. react——key值的理解

    key不是给开发者使用的,是给react在diff算法中使用的,diff算法会比较新旧虚拟dom,并且是同层比较,当同一层中有多个元素的时候,会比较这一层的key值, 如果key相同,属性改变积极更新 ...