首页 > 其他分享 >src文件夹别名配置-Vue

src文件夹别名配置-Vue

时间:2024-04-01 16:59:18浏览次数:24  
标签:src Vue vue 别名 文件夹 path import

修改vite.config.js文件

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve('./src'), //相对路径别名配置,使用 @ 符代替src
    },
  },
})

修改tsconfig.js文件,在compilerOptions中增加如下代码。

{
  "compilerOptions": {
    "baseUrl": "./", //解析非相对模块的基地址,默认是当前目录
    "paths": { //路径映射,相对于baseUrl
      "@/*": [
        "src/*"
      ]
    }
  },
}

修改成功后即可在项目中使用;@ 符代表src文件夹,示例:@/components/SvgIcon/index.vue

标签:src,Vue,vue,别名,文件夹,path,import
From: https://www.cnblogs.com/Phil-Long/p/18108844

相关文章

  • Vue — Vue3.0状态管理工具Pinia
    一、什么是Pinia?Pinia是一个专门为Vue3设计的状态管理库。它的目标是提供一种简单、直观的方法来管理Vue应用的状态,同时充分利用Vue3的响应式系统和组合式API。Pinia主要特点包括:基于Vue3:Pinia是专门为Vue3设计的状态管理库,充分利用了Vue3的响应式系统......
  • Vue tableList:<any>[]介绍
    letdata=reactive({tableList:<any>[]});在这段代码中,tableList:[]表示tableList是一个数组,数组中的元素类型可以是任意类型(即TypeScript中的any类型)。[]中的尖括号<>是TypeScript中的类型断言语法,用于指定数组的元素类型。表示任意类型,即可以是任何......
  • Vue3创建空对象方法及推荐
    当使用{}时,我们实际上是在告诉TypeScript将空对象断言为任意类型(any),从而绕过了类型检查。这种做法会失去类型安全性,但在某些特定情况下可能是一种解决方案。以下是示例代码和说明://使用<any>{}将空对象断言为any类型letobj=<any>{};//对空对象进行操作obj.f......
  • 基于vue的MOBA类游戏攻略分享平台的设计与实现|Springboot+Vue+ Mysql+Java+ B/S结构(
    本项目包含可运行源码+数据库+LW,文末可获取本项目的所有资料。现今,越来越多的人乐于选择一项合适的管理方案,但是普通用户往往受到管理经验地限制,这时MOBA类游戏攻略分享平台的崛起,大量游戏攻略进入人们生活,而MOBA类游戏攻略制无疑是游戏攻略管理的最好制度,在这样成功的管理模......
  • 前端开发中Vue3+Typescript使用装饰器出现错误一则
    今天开发公司项目时,使用TS装饰器遇到一个问题。当我写完装饰器代码后进入网页,控制台提示SyntaxError:Invalidorunexpectedtoken两个小时后的排查后发现是tsconfig.json的配置问题。如果tsconfig.json文件中没有指定target选项,TypeScript编译器会默认使用es5作......
  • Vue 中使用 flv.js 播放视频
    引入依赖npminstall--saveflv.js<template><div><videoautoplaycontrolswidth="100%"height="500"id="videoElement"></video></div></template><script>impor......
  • vue2生命周期
    什么是声明周期?生命周期概念是借鉴了软件工程和编程中普遍存在的概念,描述一个实体从开始到结束的整个过程。与植物学的生命周期相似。Vue的生命周期概念可以看作是对生物学生命周期概念的一种抽象借鉴和应用。生命周期阶段Vue实例有一个完整的生命周期,即从创建到销毁的过程......
  • Vue学习笔记69--activated + deactivated
    activated+deactivated注:生命周期学习可参考学习笔记33两个新的生命周期钩子作用:路由组件所独有的两个构造,用于捕获路由组件的激活状态具体名称:activated--路由组件被激活时触发+deactivated--路由组件失活时触发 示例如下所示:1<template>2<div>3<......
  • vue中路由跳转 切换tab页需要保存之前操作怎么办
    如图所示我需要草稿和新建流程页面切换草稿页面之前的操作(比如填写页面比如查询后页面等)仍保留使用vue中的keepalive组件 而对于若依系统菜单管理中自带是否缓存但注意一定要填写组件名称组件名称定义地址:......
  • vue 自定义tabs 样式的组件
    大家应该都用过tabs不同状态显示不同的列表 这种东西其实可以自己封装的其实是很简单的做一个这样简单的筛选组件 这样的跟tabs的效果一样上代码<template><divclass="switch-container"><divclass="box"><divclass="box-item"......