Vue项目中怎么配置在src文件下@别名

2023-11-12

方法一:在实际项目中,我们通常可以将src目录设置为@目录,这样引入文件时候可以一目了然而且使用起来非常方便,可以提高我们的开发效率。

[@代表的是src文件夹,这样将来文件过多,找的时候也方便,而且也还有提示]

本文介绍如何在实际项目中使用@作为src目录的别名:

1.Webpack+JavaScript项目

在项目新建vue.config.js,编辑vue.config.js内容如下:

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  }
}

新建jsconfig.json,内容如下:(@在node_moules和dist文件中不能使用)

方法一:

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

2.Vite+TypeScript项目

编辑vite.config.ts内容如下:

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import { resolve } from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 路径别名
    },
    extensions: ['.js', '.json', '.ts', '.vue'] // 使用路径别名时想要省略的后缀名,可以自己 增减
  }
})

编辑tsconfig.json,内容如下:

{
  "compilerOptions": {
    "baseUrl": ".",
    // 用于设置解析非相对模块名称的基本目录,相对模块不会受到baseUrl的影响
    "paths": {
      // 用于设置模块名到基于baseUrl的路径映射
      "@/*": [
        "src/*"
      ]
    }
  }
}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue项目中怎么配置在src文件下@别名 的相关文章

随机推荐

  • STM32毕业设计题目选题分享

    文章目录 1前言 2 STM32 毕设课题 3 如何选题 3 1 不要给自己挖坑 3 2 难度把控 3 3 如何命名题目 1前言 更新单片机嵌入式选题后 不少学弟学妹催学长更新STM32和C51选题系列 感谢大家的认可 来啦 以下是学长亲手
  • java 以流的形式从服务器下载文件并保存到本地

    1 基本实现流程 当我们想要下载网站上的某个资源时 我们会获取一个url 它是服务器定位资源的一个描述 下载的过程有如下几步 1 客户端发起一个url请求 获取连接对象 2 服务器解析url 并且将指定的资源返回一个输入流给客户 3 建立存
  • JavaScript设计模式读书笔记(五)=>架构型设计模式,MVC,MVP,MVVM

    全系列目录 JavaScript设计模式读书笔记 一 gt 创建型设计模式 JavaScript设计模式读书笔记 二 gt 结构型设计模式 JavaScript设计模式读书笔记 三 gt 行为型设计模式 JavaScript设计模式读书笔记
  • ] 2014找工作总结-机会往往留给有准备的人

    看了这篇文章 感觉到了震撼 如果早看到该有多好 我也是2014年的毕业生 我的找工作历程也基本上告一段落了 与本博文的原作者比起来 自己仿佛到现在也没有真正的为工作而准备 这也是自己没有规划的原因吧 所以在找工作的过程中只收到了一个offe
  • 电脑与云服务器传输文件,电脑与云服务器传输文件

    电脑与云服务器传输文件 内容精选 换一换 当创建文件系统后 您需要使用云服务器来挂载该文件系统 以实现多个云服务器共享使用文件系统的目的 本章节以Windows 2012版本操作系统为例进行CIFS类型的文件系统的挂载 同一SFS容量型文件
  • react map循环生成的button_【第1945期】彻底搞懂React源码调度原理(Concurrent模式)...

    前言 估计会懵逼 今日早读文章由成都 苏溪云投稿分享 正文从这开始 最早之前 React还没有用fiber重写 那个时候对React调度模块就有好奇 而现在的调度模块对于之前没研究过它的我来说更是带有一层神秘的色彩 色彩中朦胧浮现出两个字
  • ZIGBEE: Error[Pa045]: function "" has no prototype问题解决方法

    IAR CC2530的2个程序整合后 报错 而全部错误都是一个性质 Error Pa045 function has no prototype 去掉 Require prototype选项 重新编译即可 应该是一个编译顺序问题
  • 大屏三维地图怎么做?什么软件可以做室内地图?

    人们80 的活动时间是在室内 因此室内生成的数据量巨大且异常重要 在各类数据中 室内电子地图空间数据是非常重要的数据支撑 基于空间数据 一方面服务于C端客户 为C端客户的快速位置查询 了解室内地物分布及路径导航指引等提供服务 另一方面 地图
  • ng-alain 添加tinymce及tinymce图片上传功能模块

    tinymce的使用 tinymce中文文档 默认ng alain 已经内置了tinymc 查看共享模块是否加载了tinymce import NgxTinymceModule from ngx tinymce const THIRDMOD
  • 【牛客网练习题】Java专项练习(50题)含解析

    目录 1 运行结果 3 5 6 7 2 jdk1 8中 下面有关java 抽象类和接口的区别 说法错误的是 B D 3 在 applet 的方法中 可关闭小应用程序并释放其占用资源的是 D 4 对于构造方法 下列叙述正确的是 A C D 5
  • 从零开始使用Hexo搭建个人博客

    title Hexo Github搭建个人博客 date 2022 07 26 19 53 05 tags hexo 前往我的个人博客 阅读体验更佳本文链接 1 环境准备 1 1 安装Git 到Git 官网上下载安装 安装好后 使用命令查看
  • UNIAPP可视化设计工具 一键生成UNIAPP应用代码

    网址 DIY官网可视化工具 打造UNIAPP可视化一键生成导出
  • xman的思维导图快捷键_思维导图怎么做?

    推荐软件 微软的Mindmanager Xmind和imindmap 关于下载安装 浏览器搜索网址 https www xmind cn 网页导航栏选择Xmind8 Xmind有两种版本 一种体验版 即免费版 一种是需要购买的专业版 平时学
  • 傅里叶 方波 matlab,matlab实现方波傅立叶级数演示

    Square Wave Fourier Series Demo Square Wave Fourier Series Demo square wave fourier series demo m The user can design va
  • 重装系统后的一些环境配置

    重装系统后的一些环境配置 nvm 与 nodejs 配置 打开环境变量配置页面
  • Ubuntu 16.04安装libuvc

    安装依赖 sudo apt get intall libjpeg dev libusb 1 0 0 dev sudo ldconfig 安装libuvc git clone https github com ktossell libuvc
  • 搜索引擎技术简介

    搜索引擎技术简介 1 系统结构 抓取网页建立索引库在索引库中搜索结果排序主要的数据结构 倒排索引 inverted indexing list 这种数据结构广泛地应用在今天包括Web搜索引擎在内的各种信息检索系统中 其典型的总体结构 如下图
  • 基于MMX指令集的程序设计简介

    基于MMX指令集的程序设计简介 作者 Alex Farber出处 http www codeproject com cpp mmxintro asp MMX技术简介 Intel 公司的MMX 多媒体增强指令集 技术可以大大提高应用程序对二维
  • SpringBoot+Vue全栈开发(图书商城项目回顾)

    参考资料 1天搞定SpringBoot Vue全栈开发 后端 开发框架 SpringBoot Mybatis 开发工具 IDEA Navicat 所有文件 src main java booksystem pom xml Project O
  • Vue项目中怎么配置在src文件下@别名

    方法一 在实际项目中 我们通常可以将src目录设置为 目录 这样引入文件时候可以一目了然而且使用起来非常方便 可以提高我们的开发效率 代表的是src文件夹 这样将来文件过多 找的时候也方便 而且也还有提示 本文介绍如何在实际项目中使用 作为