前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue-cli搭建的项目中路径别名的配置

Vue-cli搭建的项目中路径别名的配置

作者头像
用户10275458
发布2022-12-21 08:29:33
5140
发布2022-12-21 08:29:33
举报
文章被收录于专栏:msc的前端之路

路径别名配置分别有两种方式

首先展示一下项目结构 对照项目结构配置
在项目根目录下创建vue.config.js文件
代码语言:javascript
复制
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创建的项目也可以进行以下配置

代码语言:javascript
复制
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第一个参数:设置的别名,第二个参数:设置的路径        
  }
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-12-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 路径别名配置分别有两种方式
    • 首先展示一下项目结构 对照项目结构配置
      • 在项目根目录下创建vue.config.js文件
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档