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
在这里插入图片描述
完美!
如果有帮助到你,能点个赞嘛!!谢谢!!!

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CG MAGIC分享3d Max中的Corona渲染器材质如何成转换VRay材质?

大家无论是使用Corona渲染器还是Vray渲染器时&#xff0c;进行材质问题时&#xff0c;都会遇到转化材质问题。 如何将CR转换成VR或者将VR转换CR材质呢&#xff1f; 对于这两者之间转换最好最好的方法只能是材质转换器。 CG MAGIC小编&#xff0c;梳理了两种方法&#xff0c;大…

JVM垃圾回收器

收集算法是内存回收的方法论&#xff0c;垃圾收集器就是内存回收的具体实现。收集器主要分三类&#xff1a;串行收集器、并行收集器以及并发收集器。 一、基础概念 1、并发和并行 a&#xff1a;并行&#xff08;Parallel&#xff09;&#xff1a;指多条垃圾收集线程并行工作&…

【漏洞复现】E-office文件包含漏洞

漏洞描述 Weaver E-Office是中国泛微科技(Weaver)公司的一个协同办公系统。泛微 E-Office 是一款标准化的协同 OA 办公软件,实行通用化产品设计,充分贴合企业管理需求,本着简洁易用、高效智能的原则,为企业快速打造移动化、无纸化、数字化的办公平台。 该漏洞是由于存在…

MATLAB R2018b安装教程

目录 一、软件下载 二、软件介绍 三、安装须知 四、安装步骤 【最后】 &#x1f388;个人主页&#xff1a;库库的里昂 &#x1f390;CSDN新晋作者 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 ✨收录专栏&#xff1a;MATLAB基础及应用&#x1f91d;希望作者的文章能…

从9.10拼多多笔试第四题产生的01背包感悟

文章目录 题面基本的01背包问题本题变式 本文参考&#xff1a; 9.10拼多多笔试ak_牛客网 (nowcoder.com) 拼多多 秋招 2023.09.10 编程题目与题解 (xiaohongshu.com) 题面 拼多多9.10笔试的最后一题&#xff0c;是一道比较好的01背包变式问题&#xff0c;可以学习其解法加深对…

【PowerQuery】PowerQuery学习路径

PowerQuery这么好,怎么去学习呢?相信很多初读本书的朋友迫切的希望了解整个PowerQuery全景知识和它提供的相应的功能。但是对于PowerQuery来说,一开始就会进行自定义函数的构建当然也是不可能的,这里有相应的学习路径来进行由浅入深的学习,帮助读者更好的理解PowerQuery的…

一文解析-通过实例讲解 Linux 内存泄漏检测方法

一、mtrace分析内存泄露 mtrace&#xff08;memory trace&#xff09;&#xff0c;是 GNU Glibc 自带的内存问题检测工具&#xff0c;它可以用来协助定位内存泄露问题。它的实现源码在glibc源码的malloc目录下&#xff0c;其基本设计原理为设计一个函数 void mtrace ()&#x…

Linux网络编程:网络协议及网络传输的基本流程

目录 一. 计算机网络的发展 二. 网络协议的认识 2.1 对于协议分层的理解 2.2 TCP/IP五层协议模型 2.3 OSI七层模型 三. 网络传输的流程 3.1 同一网段中计算机通信的流程 3.2 不同网段中计算机设备的通信 3.3 对于IP地址和MAC地址的理解 3.4 数据的封装和解包 四. 总结…

Android Studio实机同WIFI调试

1.点击Pair using Wi-Fi 2.手机扫描跳出来的二维码 小米手机可搜索无线调试进行adb 调试

运算符,switch

目录 算术运算符 逻辑运算符 强制类型转换 自增自减运算符 ​编辑 三目运算符 A&#xff1f;B:C 逗号表达式 switch 算术运算符 除法的运算结果和运算对象的数据类型有关&#xff0c;两个都是int商就是int&#xff0c;被除数或者除数只要有一个是浮点型数据&#xff0c;…

视频剪辑文案怎么写 视频剪辑文案用什么软件

视频剪辑文案与平面材料文案相比&#xff0c;在声音、画面的展现上自由度更高&#xff0c;视觉的丰满感也更高&#xff0c;是视听结合效果的呈现。本文会给大家介绍视频剪辑文案怎么写&#xff0c;视频剪辑文案用什么软件的相关内容&#xff0c;让大家可以在短时间内学会视频剪…

面试半个月后的一些想法

源于半个月面试经历后的一些想法&#xff0c;刚开始想的是随便写写&#xff0c;没想到居然写了这么多。 找不到目标找不到意义亦或是烦躁的时候&#xff0c;就写写文章吧&#xff0c;把那些困扰你很久的问题铺开来 花时间仔细想想&#xff0c;其实真正让我们生气懊恼&#xff0…