成都建设网站那家好网页制作与设计教程
有意义的标题
- 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
完美！
如果有帮助到你，能点个赞嘛！!谢谢！！！