uniapp H5 打包并部署到 nginx

uniapp H5 打包并部署到 nginx

 https://www.shuzhiduo.com/A/gVdnM1m85W/

1.运行基础路径最好用 ./ ，如果配置了其他请自行添加路径。

2.由于uniapp 的特性，所以导致了不支持 history 模式，只能支持 hash 模式（ 路径会带 # ）

3.千万千万不能勾选摇树优化（ 如果项目引用了其他组件，则会报错 node模块找不到组件，实际上是由于摇树优化，裁剪了一部分没有使用的组件，导致 node模块的缺失 ）

 

）

上面只是第一步，第二步的配置来了。

1. pubilcPath 的路径要和上图的运行基础路径一致，这是第一点。

2.disableHostCheck 要设置为true（ 禁止访问本地host文件 ）

3.router 的base，最好设置为 ./ （ 一致化，本人没有试过使用加了其他的会不会产生什么变化 ）

4. domain 是服务器的地址，记得改为自己的本地地址或者是服务器的地址

5.看了下面的图之后会附上代码，可以复制粘贴。

1. "template" : "",
   
2. "domain" : "192.168.0.74",
   
3. "router" : {
   
4. "mode" : "hash",
   
5. "base" : "./"
   
6. },
   
7. "publicPath" : "./",
   
8. "devServer" : {
   
9. "disableHostCheck" : true, //禁止访问本地host文件
10.  
11. // "https" : true,
    
12. // "port" : 8080,
    
13. "proxy" : {
    
14. "/api" : {
    
15. "target" : "http://192.168.0.202:8080", //这里使用后端服务器的地址
    
16. "changeOrigin" : true, //是否跨域
    
17. "secure" : true, // 是否支持 https 协议的代理
    
18. "pathRewrite" : {
    
19. "^/api" : ""
    
20. }
    
21. }
    
22. },
    
23. "port" : 8080,
    
24. "https" : true
    
25. },

以上配置完成之后，就能进行打包了。

按图索骥即可完成

找到 H5的打包

输入网址标题以及服务器名字（ 本地 nginx 则用本地地址 ），然后选择 发行就会进行打包

打完之后会出现这张图，出现选中部分就是打包成功，可以进行部署。

找到你的项目路径，找到这个打包之后的文件夹。例下图（ 这个H5就是你要用的东西，整个文件里的内容都是。 ）

本地nginx的部署：

1.找到你的 nginx （个人版本：1.18.0 ）

2.在你的 nginx 根目录下创建一个文件夹，例如下图。

3.可以把名字（ admin ）换成你想要的任何一个名字，然后打开它。把刚刚打包完的H5文件夹，丢进来。

接下来开始配置 nginx 的路径了。

1.首先找到conf文件夹

2.其次点击进去，找到nginx.conf 文件，打开它

找到 server 这一个对象

注意： 这里的端口必须和前面打包之前设置的端口一样，不然会找不到。

location 对象里的 root ，就是连接你刚刚在服务器底下创建的文件夹名字， 连接上 /h5/ 则是为了和其他路径区分开来

1. server {
   
2. listen 8080;
   
3. server_name 192.168.0.74;
4.  
5. # 配置根目录的地址是以 nginx 下的 html 文件夹为根目录来查找的
   
6. #root html;
7.  
8. #charset koi8-r;
9.  
10. #access_log logs/host.access.log main;
11.  
12. location / {
    
13. root html;
    
14. index index.html index.html;
    
15. }
16.  
17. # 配置我们的 admin 的前台服务 比如 47.105.134.120:8080/admin/index.html
    
18. location ^~ /h5/ {
    
19. # 处理 Vue 单页面应用 路由模式为 history 模式刷新页面 404 的问题
    
20. root admin;
    
21. autoindex on;
    
22. autoindex_exact_size on;
    
23. autoindex_localtime on;
    
24. }
25.  
26. #error_page 404 /404.html;
27.  
28. # redirect server error pages to the static page /50x.html
    
29. #
    
30. error_page 500 502 503 504 /50x.html;
    
31. location = /50x.html {
    
32. root html;
    
33. }
34.  
35. # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    
36. #
    
37. #location ~ \.php$ {
    
38. # proxy_pass http://127.0.0.1;
    
39. #}
40.  
41. # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    
42. #
    
43. #location ~ \.php$ {
    
44. # root html;
    
45. # fastcgi_pass 127.0.0.1:9000;
    
46. # fastcgi_index index.php;
    
47. # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
    
48. # include fastcgi_params;
    
49. #}
50.  
51. # deny access to .htaccess files, if Apache's document root
    
52. # concurs with nginx's one
    
53. #
    
54. #location ~ /\.ht {
    
55. # deny all;
    
56. #}

　　选择性复制粘贴即可，内容解释的很清楚了。

最后，我们来学几条命令，用于启动 nginx

1. start nginx ( 首次启动的命令 )

2.nginx -s reload （ 更新配置之后启动的命令 ）

3.nginx -s stop（ 停止nginx，关闭server 的命令 ）

最后就可以直接打开访问了。（ nginx 配置的 location 后面连接的 /h5/ 就是连接在这里的，如果不连接上去，会报错404 ）

如果连接上去了还报错，检查路径是否写错。 如果按照我的图和我的代码来的话，是可以直达的哦亲。

例如：http://192.168.0.74:8080/h5/ ( 这样会跳转到你代码设置的默认首页 )，如图所示：

最后，附上一位可爱的小姐姐写的原创博客，她的内容给了我蛮大的帮助。

所以我也写了一遍，内容比较详细，按图索骥即可。

在此 @祈澈菇凉 ，希望可以多多指教。

https://wangxiaoting.blog.csdn.net/article/details/107176967?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.control