Azure + React + ASP.NET Core 项目笔记一：项目环境搭建（二）

pnpm 安装

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

npm install -g pnpm
1

umi4 脚手架搭建

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

cd ClientApp
pnpm dlx create-umi@latest
1
2

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

$ 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)
1
2
3
4
5
6
7
8
9
10

打包语句变更

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

pnpm build
1

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

Visual Studio调试

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

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

Azure 设置变更

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

\wwwroot   => \wwwroot\dist
1

发布

之后就是发布啦
Visual Studio中右键dist
选择发布dist
之后在Web App中Console中也能发现dist文件夹上传了
再打开我们的domian

完美！
如果有帮助到你，能点个赞嘛！!谢谢！！！