当前位置: 首页 > news >正文

Azure + React + ASP.NET Core 项目笔记一:项目环境搭建(二)

有意义的标题

  • pnpm 安装
  • umi4 脚手架搭建
  • 打包语句变更
  • Visual Studio调试
  • Azure 设置变更
  • 发布

pnpm 安装

参考官网,或者直接使用npm安装

npm install -g pnpm

umi4 脚手架搭建

我这里用的umi4,官网已附上
这里需要把clientapp清空,之后

cd ClientApp
pnpm dlx create-umi@latest

选择你需要的选项后就会自动安装
安装好之后就可以运行看看

$ pnpm dev╔═════════════════════════════════════════════════════╗║ App listening at:                                   ║║  >   Local: https://127.0.0.1:8000                  ║
ready - ║  > Network: https://192.168.1.1:8000                ║║                                                     ║║ Now you can open browser with the above addresses👆 ║╚═════════════════════════════════════════════════════╝
event - compiled successfully in 1121 ms (388 modules)
event - MFSU compiled successfully in 1308 ms (875 modules)

在这里插入图片描述

打包语句变更

npm 都改成pnpm,之前熟悉了npm的同学也可以试试pnpm

pnpm build

之后也跟之前的语句类似,打包好的文件会放在dist文件夹中

Visual Studio调试

如果想在Visual Studio中调试,记得SpaProxyServerUrl替换一下,这样就能自动跳转了

<SpaProxyServerUrl>http://localhost:8000</SpaProxyServerUrl>

Azure 设置变更

由于我这次项目使用Azure部署,但是默认设置会有点问题,并不会显示页面,是因为路径问题
在Azure里的Web App中,进入Configuration,
Path mappings -> Virtual applications and directories修改一下

\wwwroot   => \wwwroot\dist

发布

之后就是发布啦
Visual Studio中右键dist
选择发布dist
之后在Web App中Console中也能发现dist文件夹上传了
再打开我们的domian
在这里插入图片描述
完美!
如果有帮助到你,能点个赞嘛!!谢谢!!!

相关文章:

Azure + React + ASP.NET Core 项目笔记一:项目环境搭建(二)

有意义的标题 pnpm 安装umi4 脚手架搭建打包语句变更Visual Studio调试Azure 设置变更发布 pnpm 安装 参考官网&#xff0c;或者直接使用npm安装 npm install -g pnpmumi4 脚手架搭建 我这里用的umi4&#xff0c;官网已附上 这里需要把clientapp清空&#xff0c;之后 cd Cl…...

Vmware通过VMware tools设置共享文件夹

步骤说明&#xff1a; 先安装VMware tools&#xff0c;再设置共享文件夹即可。 写在前面&#xff1a; 刚安装虚拟机时&#xff0c;窗口可能显得太小&#xff0c;这是窗口分辨率没有调整导致的。 点击设置->显示->分辨率调整即可 一、安装VMware tools 1.1 点击虚拟机…...

RPA机器人流程自动化专题培训大纲 (针对大学生的版本)

一、课程简介 RPA机器人流程自动化是一种新兴的技术&#xff0c;它通过软件机器人模拟人类操作计算机完成重复性任务&#xff0c;从而实现业务流程的自动化。本课程旨在介绍RPA机器人流程自动化的基本概念、原理和应用&#xff0c;并通过实践案例演示如何应用RPA机器人流程自动…...

数据在内存中的存储——练习4

题目&#xff1a; int main() {char a[1000];int i;for(i0; i<1000; i){a[i] -1-i;}printf("%d",strlen(a));return 0; }思路分析&#xff1a; 已知条件&#xff1a; 通过循环遍历&#xff0c;我们得到的结果是 -1、-2、-3、-4等等。这些是数组内部的存储的元…...

Python 06 之面向对象基础

&#x1f600;前言 在日常编程和软件开发中&#xff0c;我们通常会遇到各种各样的问题&#xff0c;其中很多问题都可以通过面向对象的程序设计方法来解决。面向对象编程不仅可以使代码更加组织化和系统化&#xff0c;而且还可以提高代码的重用性和可维护性。 . 在本教程中&…...

去除pdf/word的水印艺术字

对于pdf中的水印如果无法去除水印&#xff0c;则先另存为word&#xff0c;然后再按下面办法处理即可&#xff1a; 查看宏&#xff0c;创建&#xff1a;删除艺术字 添加内容&#xff1a; Sub 删除艺术字()Dim sh As ShapeFor Each sh In ActiveDocument.ShapesIf sh.Type msoT…...

【Linux】使用 Alist 实现阿里云盘4K播放

一、安装 Alist 官方文档 默认安装在 /opt/alist 中 curl -fsSL "https://alist.nn.ci/v3.sh" | bash -s install自定义安装路径&#xff0c;将安装路径作为第二个参数添加&#xff0c;必须是绝对路径&#xff0c;如果路径以 alist 结尾&#xff0c;则直接安装到给定…...

Gof23设计模式之状态模式

1.概述 【例】通过按钮来控制一个电梯的状态&#xff0c;一个电梯有开门状态&#xff0c;关门状态&#xff0c;停止状态&#xff0c;运行状态。每一种状态改变&#xff0c;都有可能要根据其他状态来更新处理。例如&#xff0c;如果电梯门现在处于运行时状态&#xff0c;就不能…...

如何免费下载RunWayML产生的视频文件

问题&#xff1a; 首先没有下载的按钮。 其次如果直接“视频另存为”菜单&#xff0c;报错。 解决方案&#xff1a; 1&#xff09;复制视频链接。 2&#xff09;新开chrome&#xff0c;在url中粘贴上一步的url路径。 3&#xff09;当看到视频后&#xff0c;在视频上面右键“…...

9.14 C++作业

仿照vector手动实现自己的myVector&#xff0c;最主要实现二倍扩容功能 #include <iostream>using namespace std;template <typename T> class Myvector {T *data; //存储数据的数组int len; //当前数组的长度int mycapa; //容纳数据的总容量public://…...

java关于文件记录篇章之文件夹创建篇

今天&#xff0c;创建一个文件夹目录的时候&#xff0c;创建多级目录的时候发现&#xff0c;自己老是创建失败&#xff0c;但是系统显示文件夹创建成功&#xff0c;但是你去找文件夹的时候&#xff0c;又发现创建失败&#xff0c;这里在我成功之后封装了一个创建文件夹的创建对…...

显示器显示的画面突然偏红色如何解决

显示器显示的画面突然偏红色如何解决 1. 概述2. 解决方法结束语 1. 概述 显示器显示的画面突然偏红色 &#xff0c;使用向日葵远程电脑&#xff0c;看到的画面是正常的&#xff0c;但是显示器上的画面确还是骗红的&#xff0c;这时候就需要看一下是不是开启了系统也夜间模式&a…...

【element-ui】 el-table 表格动态合并相同数据单元格最全教程,可指定列+自定义合并条件,附完整代码

el-table合并单元格 1.固定合并 官方挺提供的合并具体某行列的方法:el-table合并行或列通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。 该函数可以返回一个包含…...

管理方法论:6. 正视团队冲突——化解危机,长治久安

概念 团队冲突指的是两个或两个以上的团队在目标、利益、认识等方面互不相容或互相排斥&#xff0c;从而产生心理或行为上的矛盾&#xff0c;导致抵触、争执或攻击事件。 参考&#xff1a; https://baike.baidu.com/item/%E5%9B%A2%E9%98%9F%E5%86%B2%E7%AA%81/6747073 htt…...

基于SpringBoot的一套强大后台管理系统

概述 一个功能强大而完善的后台管理系统框架&#xff0c;用户可基于此框架进行二次开发&#xff0c;定制成符合自己的需求的后台管理系统&#xff01; 详细 运行截图&#xff1a; 项目结构&#xff1a; 详细说明&#xff1a; 环境说明&#xff1a; jdk1.8mavenMySQL5.7 项…...

音乐项目后台管理系统出现的问题

1.当对歌手的歌曲进行编辑时候&#xff0c;会把所有的歌曲信息给修改了。 解决方法:修改controller层的中SongController代码中的这一行代码 boolean flag songService.updateById(song); 2.添加歌曲&#xff0c;在弹出框中输入&#xff0c;没有显示。原因&#xff1a;前端页…...

数据结构——图(图的存储及基本操作)

文章目录 前言一、邻接矩阵法&#xff08;顺序存储&#xff09;1.无向图存储邻接矩阵算法2.有向图存储邻接矩阵算法 二、邻接表法(图的链式存储结构)总结 前言 邻接矩阵法(图的顺序存储结构) 1.1 无向图邻接矩阵算法 1.2 有向图邻接矩阵算法邻接表法(图的一种链式存储结构) 一…...

2023年项目管理工具使用趋势分析及预测

随着技术的不断进步以及工作和领导态度的演变&#xff0c;各个行业都在经历着深刻的变革。项目管理领域同样如此&#xff0c;团队项目的技术和人员管理风格及策略正在不断地调整与优化&#xff0c;以适应新冠疫情后所呈现出的新的工作场所格局。在此背景下&#xff0c;以下是我…...

Vue3 实现一个无缝滚动组件(支持鼠标手动滚动)

Vue3 实现一个无缝滚动组件&#xff08;支持鼠标手动滚动&#xff09; 前言 在日常开发中&#xff0c;经常遇到需要支持列表循环滚动展示&#xff0c;特别是在数据化大屏开发中&#xff0c;无缝滚动使用频率更为频繁&#xff0c;在jquery时代&#xff0c;我们常用的无缝滚动组…...

【IP数据报】IP地址和MAC地址的区别

1、用IP地址来标识Internet的主机 在每个IP数据报中&#xff0c;都会携带源IP地址和目标IP地址来标识该IP数据报的源和目的主机。IP数据报在传输过程中&#xff0c;每个中间节点(IP 网关)还需要为其选择从源主机到目的主机的合适的转发路径(即路由)。IP协议可以根据路由选择协…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

计算机基础知识解析:从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

深度学习之模型压缩三驾马车:模型剪枝、模型量化、知识蒸馏

一、引言 在深度学习中&#xff0c;我们训练出的神经网络往往非常庞大&#xff08;比如像 ResNet、YOLOv8、Vision Transformer&#xff09;&#xff0c;虽然精度很高&#xff0c;但“太重”了&#xff0c;运行起来很慢&#xff0c;占用内存大&#xff0c;不适合部署到手机、摄…...