Vue-cli搭建的项目中路径别名的配置
2023-02-18 16:35:59 时间
路径别名配置分别有两种方式
首先展示一下项目结构 对照项目结构配置
在项目根目录下创建vue.config.js文件
module.exports = {
configureWebpack: {
resolve: {
alias: {
"assets": "@/assets",
"common": "@/common",
"components": "@/components",
"network": "@/network",
"views": "@/views"
}
}
}
}
使用cli3.x创建的项目在配置路径别名时可以使用@代表src,在node_modules/@vue/cli-service/lib/config/base.js文件中已经配置好的
使用cli4.x创建的项目也可以进行以下配置
const path = require('path');//引入path模块
function resolve(dir){
return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径
}
module.exports = {
chainWebpack: (config)=>{
config.resolve.alias
.set('components',resolve('src/components'))
.set('views',resolve('src/views'))
.set('assets',resolve('src/assets'))
.set('common',resolve('src/common'))
.set('network',resolve('src/network'))
//set第一个参数:设置的别名,第二个参数:设置的路径
}
}
相关文章
- 讲解开源项目:一步步跑起来个 Java 前后端分离的人力资源管理系统
- 讲解开源项目:5分钟搭建私人Java博客系统
- ERROR: Java 1.7 or later is required to run Apache Drill.
- 三剑客命令
- PC版小爱同学来了
- 2023年最值得关注的机器人趋势TOP10
- 为自己的博客添加追番列表
- 便携小空调源码
- 开启CDN获取源IP
- TCP三次握手和四次挥手
- 网站访问量暨与小伙伴们的N次相遇
- Centos7部署安装zabbix5.0
- 解决Zabbix中文乱码情况
- Nginx-基础总结(上)
- Nginx-基础总结(下)
- shell if语句
- Shell case条件语句的应用实践
- 一招解决检测你的电脑是否可升级win11
- Shell while循环和until循环语句
- Shell for循环和select循环语句