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

有意义的标题

• [pnpm 安装](#pnpm 安装)
• [umi4 脚手架搭建](#umi4 脚手架搭建)
• 打包语句变更
• [Visual Studio调试](#Visual Studio调试)
• [Azure 设置变更](#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

完美！

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