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文件下@别名 的相关文章

  • 为什么我的反应路由器链接将我带到页面中间?

    我的网站上有很多链接 但只有一个可以执行此操作 它没有将我带到导航栏的顶部 而是转到内容的中间 知道为什么会这样吗 这是一个页面 其中有一个 map经历一些JSON 这是渲染div页面下方的文本元素 如果重要的话 这是一些可能相关的代码 路
  • 使用 Firefox 插件 sdk 的 nsISocketTransportService

    我正在尝试使用 Firefox 来读取 SSH 横幅 IE 当您最初连接到 SSH 服务器时 服务器会向您发送其横幅 标识服务器软件 并且您向 SSH 服务器发送您的横幅 标识您的客户端软件 为此 我使用以下 URL 中的示例 firefo
  • 如何让Gmail像加载进度条一样

    我想在页面的中心和顶部创建一个像 Gmail 一样的加载进度条 并适用于所有浏览器 这是基本代码
  • 在随机位置启动 HTML5

    我有一个大约 2 小时长的音轨 我想在我的网站上使用它 我希望它在页面加载时在随机位置开始播放曲目 使用 HTML5 可以吗 我知道您可以使用 element currentTime 函数来获取当前位置 但是如何在完全下载之前获取曲目的总时
  • 水平滚动的表格上的“粘性”标题......完全不可能?

    经过过去几个小时的研究后 我开始认为这是不可能的 即使在最新的浏览器上也是如此 HTML table具有水平滚动的元素 带有 粘性 thead在顶部 作为垂直滚动的周围网页的一部分 这是我的尝试 a height 100px backgro
  • 在javascript中访问函数内的实例变量?

    如何以最简单的方式访问函数内的实例变量 function MyObject Instance variables this handler Methods this enableHandler function var button doc
  • 此页面上的脚本导致 ie 运行缓慢

    问题就在标题中 IE 行为异常 并说有一个脚本运行缓慢 FF 和 Chrome 没有这个问题 我怎样才能找到问题所在 那个页面有很多JS 手动检查不是一个好主意 EDIT 这是我正在处理的一个项目的页面 但我需要一个工具来查找问题 End
  • React JS 服务器端问题 - 找不到窗口

    你好 我正在尝试在我的reactJS项目中使用react rte 我有服务器端渲染 每次我想使用这个包时 我都会得到 return msie 6 9 b test window navigator userAgent toLowerCase
  • 如何在 React Native 上显示 SVG 文件?

    我想显示 svg 文件 我有一堆 svg 图像 但我找不到显示的方式 我尝试使用Image and Use的组成部分反应本机 svg https github com magicismight react native svg但他们不这样做
  • C# 和 Javascript SHA256 哈希的代码示例

    我有一个在服务器端运行的 C 算法 它对 Base64 编码的字符串进行哈希处理 byte salt Convert FromBase64String serverSalt Step 1 SHA256Managed sha256 new S
  • JavaScript中如何确保输入的值是数字而不是字符串?

    我创建了这个函数 function num var x prompt please enter your first number var y prompt please enter your second number if isNaN
  • 使用 JQuery 禁用和启用所有超链接

    我有以下禁用所有超链接的内容 但在事件发生后我想再次启用它们 我该如何执行此操作 a click function return false 我认为这不仅仅是将其设置为 true 那么简单 谢谢大家 不要以这种方式绑定 点击 处理程序 而是
  • ES6继承:使用`super`访问父类的属性

    JavaScript 的super关键字 当我在 Chrome Babel TypeScript 上运行代码时 得到了不同的结果 我的问题是哪个结果是正确的 规范的哪一部分定义了这种行为 下面的代码 class Point getX con
  • 如何在 webpack 中渲染嵌套的 SASS?

    采取以下CSS MyComponent color blue Button color red 以及以下 React 组件 import React from react import classes from MyComponent sc
  • 语法错误:意外的标记“?”在 repl.it 上用 JavaScript 制作不和谐机器人时 [重复]

    这个问题在这里已经有答案了 我收到错误 const token this client token this client accessToken SyntaxError Unexpected token Discord 机器人代码 con
  • 如何在画布上所有其他内容后面绘制图像? [复制]

    这个问题在这里已经有答案了 我有一块画布 我想用drawImage在画布上当前内容后面绘制图像 由于画布上已经有内容 我正在使用字面上的画布来创建包含图像的画布 因此我无法真正先绘制图像 所以我无法使用drawImage在我呈现其余内容之前
  • Service Worker 与 Shared Worker

    Service Worker 和 Shared Worker 有什么区别 我什么时候应该使用 Service Worker 而不是 Shared Worker 反之亦然 Service Worker 具有共享 Worker 之外的附加功能
  • Jwt 签名和前端登录身份验证

    我有这个特殊的 jwt sign 函数 Backend const token jwt sign id user id process env TOKEN SECRET expiresIn 1m res header auth token
  • ng-include 和 ng-view 不同时加载

    下面是我的应用程序的结构 很简单 页眉和页脚是非常小的文件 而主页上的 ng view 要大得多 当我进入该页面时 我注意到了这一点 首先加载两个 ng include 然后 ng view 出现 页脚被推到底部 页脚闪烁大约 0 1 秒
  • 将多维数组转换为单数组(Javascript)

    我有一个对象数组 来自 XLSX js 解析器 因此其长度和内容各不相同 表示已给予项目的资助 简化后 它看起来像这样 var grants id p 1 location loc 1 type A funds 5000 id p 2 lo

随机推荐

  • 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文件夹 这样将来文件过多 找的时候也方便 而且也还有提示 本文介绍如何在实际项目中使用 作为