nginx 部署antd_design_pro

﹏ヽ暗。殇╰゛Y 2022-10-09 00:34 8阅读 0赞

偶尔翻到antd\_design\_pro 发现管理端做的还是可以的，虽然是后端的程序员，但是也要了解一下前端的一些知识，那么首选我们看看如何部署nginx

我们在网上很容易下载到antd\_design\_pro的安装包，此处我们用4.30的版本

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70][]

这个是下载之后的解压的目录，我们通过命令行进入到解压的目录：

执行：cnpm run build

D:\ant-design-pro-4.3.0>cnpm run build
    
    > ant-design-pro@4.2.1 build D:\ant-design-pro-4.3.0
    > umi build
    
    
    √ Webpack
      Compiled successfully in 1.72m
    
    Browserslist: caniuse-lite is outdated. Please run:
    npx browserslist@latest --update-db
    
    Why you should do it regularly:
    https://github.com/browserslist/browserslist#browsers-data-updating
     DONE  Compiled successfully in 102907ms                                                                     下午4:01:50
    
     File                                         Size           Gzipped
    
     dist\umi.70f0e3dc.js                         990.5 KB       319.5 KB
     dist\p__ListTableList.b3209d52.async.js      812.5 KB       219.7 KB
     dist\layouts__BasicLayout.005548fe.asyn      131.3 KB       38.5 KB
     c.js
     dist\p__Admin.4e6bc2a0.async.js              109.0 KB       31.2 KB
     dist\vendors~layouts__BasicLayout~p__Ad      76.2 KB        23.1 KB
     min~p__ListTableList.26b84bf2.async.js
     dist\vendors~p__user__login.4907c46e.as      41.9 KB        14.4 KB
     ync.js
     dist\vendors~layouts__BasicLayout~p__Ad      38.0 KB        12.1 KB
     min~p__ListTableList~p__Welcome~p__user
     __login.38ba114f.async.js
     dist\vendors~layouts__BasicLayout~p__Ad      31.2 KB        10.0 KB
     min~p__ListTableList~p__Welcome.be28ae3
     5.async.js
     dist\vendors~layouts__BasicLayout~layou      29.2 KB        10.0 KB
     ts__UserLayout.d8b2d212.async.js
     dist\vendors~p__Welcome.948a2af2.async.      24.8 KB        8.0 KB
     js
     dist\layouts__UserLayout.b632ca4d.async      13.7 KB        5.0 KB
     .js
     dist\vendors~p__Admin~p__ListTableList~      9.7 KB         3.4 KB
     p__Welcome~p__user__login.7e036fd1.asyn
     c.js
     dist\p__user__login.138d807d.async.js        8.2 KB         3.1 KB
     dist\p__Welcome.f1a6db9e.async.js            1.3 KB         626.0 B
     dist\layouts__SecurityLayout.3b2b0175.a      1.1 KB         633.0 B
     sync.js
     dist\p__404.d10a0bff.async.js                442.0 B        312.0 B
     dist\p__ListTableList.f02b2e5d.chunk.cs      201.1 KB       28.3 KB
     s
     dist\umi.d669f8b0.css                        112.0 KB       13.6 KB
     dist\vendors~p__Admin~p__ListTableList~      70.9 KB        7.9 KB
     p__Welcome~p__user__login.b4d449bc.chun
     k.css
     dist\vendors~layouts__BasicLayout~p__Ad      33.9 KB        4.3 KB
     min~p__ListTableList~p__Welcome~p__user
     __login.04270fcf.chunk.css
     dist\layouts__BasicLayout.3bf3bf6e.chun      30.1 KB        5.2 KB
     k.css
     dist\vendors~p__user__login.83736eb6.ch      24.6 KB        3.8 KB
     unk.css
     dist\p__Admin.0a1035f8.chunk.css             20.7 KB        4.1 KB
     dist\vendors~layouts__BasicLayout~p__Ad      12.4 KB        2.4 KB
     min~p__ListTableList~p__Welcome.45ebbd8
     2.chunk.css
     dist\vendors~p__Welcome.d535de34.chunk.      11.6 KB        2.5 KB
     css
     dist\vendors~layouts__BasicLayout~p__Ad      9.8 KB         1.8 KB
     min~p__ListTableList.6049e290.chunk.css
     dist\vendors~layouts__BasicLayout~layou      2.3 KB         702.0 B
     ts__UserLayout.b333a9c7.chunk.css
     dist\p__user__login.49d4f094.chunk.css       1.1 KB         444.0 B
     dist\layouts__UserLayout.d1082123.chunk      941.0 B        543.0 B
     .css
     dist\p__Welcome.72864ae1.chunk.css           162.0 B        135.0 B
    
      Images and other types of assets omitted.
    
    
    
       ╭────────────────────────────────────────────────────────────────╮
       │                                                                │
       │     New major version of npm available! 6.14.13 -> 7.18.1      │
       │   Changelog: https://github.com/npm/cli/releases/tag/v7.18.1   │
       │               Run npm install -g npm to update!                │
       │                                                                │
       ╰────────────────────────────────────────────────────────────────╯
    
    
    D:\ant-design-pro-4.3.0>

将打包好的文件在dist目录下，将dist所有文件拷贝到nginx根目录下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1][]

然后启动nginx

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2][]

希望对你有所帮助

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70]: /images/20221005/19cde7642f5f4f1d965ee72d3bc885ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1]: /images/20221005/e38ec0a0fd524be4b2920e3723937f2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2]: /images/20221005/0f1565174c574b2ab035321b460dd559.png