vite+vue3使用@路径,报错处理

news2024/12/23 19:53:08

报错原因:未配置 @符号为指定路径别名,直接使用导致

处理方法:

安装path模块:

npm install --save-dev @types/node

 修改vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    host: '0.0.0.0'
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

修改tsconfig.json:

配置 baseUrl、paths

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

最后重新运行项目

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/912120.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Hope.money:新兴DeFi项目如何重新定义稳定币生态的未来?

联储加息导致金融市场紧缩,Terra、3AC、FTX等知名中心化机构未能妥善应对而暴雷,并重创了整个加密货币市场,导致参与者损失惨重。这些事件揭示了中心化机构的局限,投资者对其资产掌控权的担忧愈发强烈。 自2018年首个DeFi协议Com…

Java算法:对角线遍历

Java算法:对角线遍历 学习目标:对角线遍历算法算法要求算法思路算法实现 学习目标:对角线遍历算法 每日初级算法:对角线遍历 算法要求 给你一个大小为 m x n 的矩阵 mat ,请以对角线遍历的顺序,用一个数组…

使用 Feature Flags 与可观测工具实现数据库灰度迁移

场景描述 很多企业会遇到数据库升级、或数据库迁移的情况,尤其是在自建数据库服务向云数据库服务、自建机房向云机房、旧数据库向新数据库迁移等场景。 然而,我们需要在整个移植过程中保证其稳定性、避免数据遗失、服务宕机等情况,最常见的移…

PHP求职招聘系统Dreamweaver开发mysql数据库web结构php编程计算机网页

一、源码特点 PHP 求职招聘系统是一套完善的web设计系统,对理解php编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。 源码 https://download.csdn.net/download/qq_41221322/88240283 论文 https://down…

Python土力学与基础工程计算.PDF-隧道涌水量

Python 求解代码如下: 1. # 定义参数 2. A 2000 # 地表面积,单位:平方米 3. S 10 # 截面积,单位:平方米 4. h 500 # 年地下径流深度,单位:毫米 5. 6. # 转换单位 7. h h / 1000 # 单…

Linux 中查看文件第n行内容的命令(实战案例)

Linux 中查看文件第n行内容的命令实战案例 方法1: head -m filename | tail -1 //查看filename文件的第m行(tail -1 是数字1) head -n (数字)(文件名):数字为正数 显示前多少行的文…

React学习记录

一、简介 1、React是什么? 一个将数据渲染为HTML视图的开源JavaScript库,操作DOM呈现页面。 2、特点 采用组件化模式,声明式编码,提高开发效率及组件复用率在react native中可使用react语法进行移动端开发使用虚拟DOM优秀的di…

数据结构之——(手撕)顺序表

本章会介绍的知识点如下图: 1: 顺序表的概念:顺序表是用一段物理地址连续的存储单元依次存储数据的线性结构,通常我们使用数组来表示,对数组进行增删查改。 顺序表的结构:逻辑结构与物理结构都是内存中一块…

无涯教程-PHP - preg_match()函数

preg_match() - 语法 int preg_match (string pattern, string string [, array pattern_array], [, int $flags [, int $offset]]]); preg_match()函数在字符串中搜索pattern,如果存在pattern,则返回true,否则返回false。 如果提供了可选…

回归预测 | MATLAB实现GA-RF遗传算法优化随机森林算法多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现GA-RF遗传算法优化随机森林算法多输入单输出回归预测(多指标,多图) 目录 回归预测 | MATLAB实现GA-RF遗传算法优化随机森林算法多输入单输出回归预测(多指标,多图)效果一览基本介绍程…

今天七夕,群友让我帮忙给他分配一个对象,于是我。。。

今天七夕,群友让我帮忙给他分配一个对象,于是我只好尝试给他分配对象了: CGirlFrined *pGF new CGirlFrined("大屌萌妹");int nRet (群友).SetGirlFriend(pGF);if (nRet ! 0) {alert("分配失败!"); }后来觉…

16、Flink 的table api与sql之连接外部系统: 读写外部系统的连接器和格式以及Apache Kafka示例(3)

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…

GitRedisNginx合集

目录 文件传下载 Git常用命令 Git工作区中文件的状态 远程仓库操作 分支操作 标签操作 idea中使用git 设置git.exe路径 操作步骤 linux配置jdk 安装tomcat 查看是否启动成功 查看tomcat进程 防火墙操作 开放指定端口并立即生效 安装mysql 修改mysql密码 安装lrzsz软…

Linux 线程同步——条件变量

一、条件变量的概念 如果说互斥锁是用于同步线程对共享数据的访问的话,那么条件变量则是用于在线程之间同步共享数据的值。条件变量提供了一种线程间的通知机制:当某个共享数据达到某个值的时候,唤醒等待这个共享数据的线程。如下图所示&…

Java【手撕双指针】LeetCode 202. “快乐数“, 图文详解思路分析 + 代码

文章目录 前言一、快乐数1, 题目2, 思路分析3, 代码展示 前言 各位读者好, 我是小陈, 这是我的个人主页, 希望我的专栏能够帮助到你: 📕 JavaSE基础: 基础语法, 类和对象, 封装继承多态, 接口, 综合小练习图书管理系统等 📗 Java数据结构: 顺序表, 链表,…

Ubuntu系列弹性云服务器如何安装图形化界面?

​ 参考链接:Ubuntu系列弹性云服务器如何安装图形化界面? 操作场景 为了提供纯净的弹性云服务器系统给客户,Ubuntu系列弹性云服务器默认未安装图形化界面,如果您需要使用图形化界面,请参见本节内容进行安装。 对于GPU加…

Python支持下最新Noah-MP陆面模式站点与区域数据的处理、单站和区域的模拟、模拟结果的输出和后续分析及可视化

目录 Noah-MP 5.0模型介绍&模型所需环境的搭建 Python教程 Noah-MP 5.0模型站点模拟 Noah-MP 5.0模型区域模拟 更多应用 熟悉陆表过程的主要研究内容以及陆面模型在生态水文研究中的地位和作用;深入理解Noah-MP 5.0模型的原理,掌握Noah-MP模型&…

Video-LLaMA

文章目录 链接主要贡献模型一些思考啥是Q-former为什么position embedding可以辅助学到temporal的信息 代码视觉处理 一些惊喜 链接 https://github.com/DAMO-NLP-SG/Video-LLaMA 主要贡献 能够捕捉到一小小短时间(temporal)里视觉的变化 - 使用了Q-f…

“卷王”新茶饮们:从风口,卷到了十字路口

【潮汐商业评论/原创】 “楼下奈雪开业了,扫码9块9就可以喝到杨枝甘露,这也太便宜了,”Chloe向同事说道。 “上次跟Fendi联名的喜茶,两杯也只要38元。” “喜茶奈雪开始向二线价格靠拢?怎么都那么便宜了&#xff1f…

【一对一学习小组】2023年有三AI-CV初阶-基础算法组发布,如何夯实深度学习图像识别算法理论基础与实践...

2023年有三AI-CV初阶-基础算法组正式发布!有三AI已经推出了CV初-中-高级培养计划(原名有三AI-CV季划),这是我们的终身计算机视觉学习小组。 该培养计划具有以下特点: 【系统性】配套有非常完备的理论与实践 【永久性】…