Vue使用@别名替换后端ip地址

news2024/11/27 18:40:34

1. 安装 @types/node

@types/node 包允许您在TypeScript项目中使用Node.js的核心模块和API,并提供了对它们的类型检查和智能提示的支持。

npm install @types/node --save-dev

比如安装之后,就可以导入nodejs的 path模块,在下面代码 import path from "path"; 中,path 是 Node.js 的核心模块之一,用于处理文件路径的操作。它提供了一些方法,用于在不同操作系统上正确解析、拼接和转换文件路径,以及获取路径的各个部分(目录名、文件名、扩展名等)。

2. 在vite.config.ts里面配置resolve

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

export default defineConfig({
  plugins: [vue()],
  server: {
     host: '0.0.0.0', //允许的主机头

     port: 5000, // 你需要定义的端口号

 }
 resolve: {
  // 配置路径别名, @就代表当前项目的绝对路径 
  // __dirname是一个全局变量,表示当前模块所属目录的绝对路径
  // path.resolve返回一个以相对于当前的工作目录(working directory)的绝对路径, 
  // 比如当前工作目录为 D:\205\wms-web 那么 @ 就代表 D:\205\wms-web\src
  alias: {
    '@': path.resolve(__dirname, './src'),
  }
},

})

4. 如果提示有标红波浪,在tsconfig.app.json 添加如下代码.

   "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }





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

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

相关文章

【SEO】什么是SEO?

什么是SEO(搜索引擎优化)?为什么SEO对于⼀个⽹站⾄关重要? SEO 全称是搜索引擎优化(Search Engine Optimization) 因为我们目前开发的网址,需要人看到,除了通过宣传营销的方式展现…

C++ | Leetcode C++题解之第468题验证IP地址

题目&#xff1a; 题解&#xff1a; class Solution { public:string validIPAddress(string queryIP) {if (queryIP.find(.) ! string::npos) {// IPv4int last -1;for (int i 0; i < 4; i) {int cur (i 3 ? queryIP.size() : queryIP.find(., last 1));if (cur st…

ctf.bugku-eval

题目来源&#xff1a;eval - Bugku CTF 访问页面&#xff0c; 代码解释 <?phpinclude "flag.php"; //包含"flag.php"文件$a $_REQUEST[hello]; //从请求参数hello中获取值并赋给变量$a。 eval( "var_dump($a);"); //…

SQLAlchemy模型定义:映射数据库表到Python类

SQLAlchemy是一个流行的Python SQL工具包和对象关系映射&#xff08;ORM&#xff09;框架&#xff0c;它提供了一个高层的ORM以及底层的SQL表达式语言。使用SQLAlchemy&#xff0c;开发者可以以面向对象的方式来操作数据库&#xff0c;而不必编写复杂的SQL语句。本文将详细介绍…

【spring ai】java 实现RAG检索增强,超快速入门

rag 需求产生的背景介绍&#xff1a; 在使用大模型时&#xff0c;一个常见的问题是模型会产生幻觉&#xff08;即生成的内容与事实不符&#xff09;&#xff0c;同时由于缺乏企业内部数据的支持&#xff0c;导致其回答往往不够精准和具体&#xff0c;偏向于泛泛而谈。这些问题…

如何利用wsl-Ubuntu里conda用来给Windows的PyCharm开发

前提&#xff1a;咱们在wsl-Ubuntu上&#xff0c;有conda的虚拟环境 咱们直接打开PyCharm,打开Settings 更换Python Interpreter即可 当然一开始可能没有下面的选项&#xff0c;需要我们点击右边的Add Interpreter 这里选择wsl 点击next 将这两步进行修改 可以看出来&#xff0…

计算机视觉之OpenCV vs YOLO

好多开发者希望搞明白OpenCV 和YOLO区别&#xff0c;实际上&#xff0c;二者在计算机视觉领域都有广泛应用&#xff0c;但它们有很大的不同。 一、OpenCV 概述 OpenCV&#xff08;Open Source Computer Vision Library&#xff09;是一个开源的计算机视觉和机器学习软件库。它…

继承--C++

文章目录 一、继承的概念及定义1、继承的概念 二、继承定义1、定义格式2、继承基类成员访问方式的变化3、继承类模板 三、基类和派生类间的转换1、继承中的作用域2、隐藏规则&#xff1a; 四、派生类的默认成员函数1、4个常见默认成员函数2、实现⼀个不能被继承的类 五、继承与…

(八)Proteus仿真STM32单片机GPIO驱动数码管

1&#xff0c;参考上篇&#xff0c;将LED点阵屏更换成数码管如下图 2&#xff0c;修改驱动函数&#xff0c;数组seg[14]前10个是0-9数字的编码&#xff0c;后四个是空格&#xff0c;点&#xff0c;横线&#xff0c;下划线 char seg_decode(char num)//数字解码 {const char se…

【华为欧拉】国产OpenEuler服务器系统安装以及图形界面

openEuler下载 | openEuler ISO镜像 | openEuler社区官网 下载安装iso 本次选择4G的社区版本 安装&#xff0c;复制到光盘&#xff0c;光盘引导安装。虚拟机安装&#xff0c;准备好iso文件引用&#xff0c;指定好安装源&#xff0c;安装界面和centOS基本一样。选择最小安装就…

JVM系列(二) -类的加载过程介绍

一、背景介绍 我们知道 Java 是先通过编译器将.java类文件转成.class字节码文件&#xff0c;然后再通过虚拟机将.class字节码文件加载到内存中来实现应用程序的运行。 那么虚拟机是什么时候加载class文件&#xff1f;如何加载class文件&#xff1f;class文件进入到虚拟机后发…

彻底理解TypeScript函数语法

目录 参数类型基本声明默认参数剩余参数可选只读匿名函数回调函数 返回值类型函数类型表达式调用签名构造签名 函数的重载this可推导的编译选项this类型内置工具 函数是JavaScript非常重要的组成部分&#xff0c;TypeScript中也是如此&#xff0c;TypeScript 提供了强大的类型系…

网关在不同行业自动化生产线的应用

网关在不同行业自动化生产线的应用&#xff0c;展示了其作为信息与物理世界交汇点的广泛影响力&#xff0c;尤其在推动行业智能化、自动化方面发挥了不可估量的作用。以下是网关技术在污水处理、智慧农业、智慧工厂、电力改造及自动化控制等领域的深入应用剖析。 1. 污水处理 …

盒子模型的简单运用

1.块内元素与行内元素 HTML_code <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</titl…

Scala面试题大全~基础题(15题)

1&#xff1a;Scala是什么? Scala是一种多范式的编程语言&#xff0c;它结合了面向对象编程和函数式编程的特性&#xff0c;它支持面向对象、函数式和命令式编程方法。Scala运行在Java虚拟机&#xff08;JVM&#xff09;上&#xff0c;这意味着它可以与Java代码无缝集成。它还…

【多版本并发控制(MVCC)】

并发事务问题&#xff1a; MySQL隔离级别-未提交读&#xff0c;提交读&#xff0c;可重复读&#xff0c;序列化 隔离级别对于并发事务的解决情况 隔离级别脏读不可重复读幻读未提交读不可不可不可读已提交可不可不可可重复读 &#xff08;默认&#xff09;可可不可串行化&…

现货黄金价格走势图策略分析 先看“势”

在现货黄金投资市场&#xff0c;对金价走势图的趋势进行分析&#xff0c;是投资者做出明智决策的关键步骤。通过有效的趋势分析&#xff0c;投资者可以更好地预测市场的走向&#xff0c;从而制定相应的交易策略。本文将详细介绍如何分析金价的趋势&#xff0c;并探讨这种分析方…

J1学习打卡

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 # 数据预处理和加载 import torch from torch import nn, optim from torch.utils.data import DataLoader from torchvision import datasets, transforms, …

Python | Leetcode Python题解之第470题用Rand7()实现Rand10()

题目&#xff1a; 题解&#xff1a; class Solution:def rand10(self) -> int:while True:a rand7()b rand7()idx (a - 1) * 7 bif idx < 40:return 1 (idx - 1) % 10a idx - 40b rand7()# get uniform dist from 1 - 63idx (a - 1) * 7 bif idx < 60:retur…

C语言 | Leetcode C语言题解之第472题连接词

题目&#xff1a; 题解&#xff1a; typedef struct Trie {struct Trie * children[26];bool isEnd; }Trie;#define TRIE_INITIAL(node) do { \for (int i 0; i < 26; i) { \(node)->children[i] NULL; \} \(node)->isEnd false; \ }while(0);static void freeTri…