最近写了一个小的移动端的项目,需要进行手机上测试,下面就需要前端自己将项目进行部署
1.进行Nginx的下载(尽量下载稳定版)
在这里插入图片描述
进行解压完成之后如上图,双击nginx.exe(在网上搜了很多说双击闪退是开启了)
打开html文件夹如下图
在这里插入图片描述
把打包好的dist文件放入html文件夹如下图
在这里插入图片描述

进行最重要的一步配置nginx.conf文件
在这里插入图片描述
最重要的部分(脚手架2.0搭建项目)

location /dist {
            root   E:/work/nginx-1.18.0/html; //根据自己的文件位置
            index  index.html index.htm;
        }
  
        location /static {
            root   E:/work/nginx-1.18.0/html/html;  //根据自己的文件位置
            index  index.html index.htm;
        }

脚手架3.0搭建的项目的nginx配置

#user  nobody;
worker_processes auto;
 
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
 
#pid        logs/nginx.pid;
 
events {
    worker_connections  1024;
}
 
http {
    include       mime.types;
    default_type  application/octet-stream;
 
    #access_log  logs/access.log  main;
 
    sendfile        on;
    #tcp_nopush     on;
#长连接
    keepalive_timeout  65;
#数据压缩(能压缩掉70%左右)
    gzip  on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_comp_level 3;
    gzip_types text/plain application/x-javascript text/css application/xml text/javascript image/jpeg image/gif image/png;
    gzip_vary off;
    gzip_disable "MSIE [1-6]\.";
 
   #服务器配置
    server {
        listen       80;
        server_name  localhost www.baidu,com;
 
	client_max_body_size 10M;
	client_body_buffer_size 128K;
 
	location / {
		try_files $uri $uri/ /index.html;
	}
	location /admin {
		proxy_pass	http://localhost:8901/resource;
		add_header Content-Type "text/plain;charset=utf-8";
		add_header 'Access-Control-Allow-Origin' '*';
		add_header 'Access-Control-Allow-Credentials' 'true';
		add_header 'Access-Control-Allow-Methods' 'GET, POST';
        }
    }
 
}

然后在图一位置的地方shife+右键窗口打开运行nginx -s reload操作
就可以点开index.html文件,
如果想在手机端进行文件的访问可查看自己电脑的ip,获取ip的方法
window -->cmd --> ipconfig --> IPv4地址
具体步骤之前博客有进行写过可自行查看

更多推荐