环境
- win10操作系统
- nginx-1.11.10
Vue打包
vue脚手架打包，在cmd执行下面命令，自己命好包的名字。
npm run build
Nginx目录
主要关注画红框的文件跟文件夹：
conf：里面包含重要的配置文件nginx.confhtml：里面放置Vue打包的文件夹logs：里面放置日志文件.bat文件：是可执行文件，由一系列命令构成，其中可以包含对其他程序的调用，在这里配置的就是快速操作命令
Nginx.conf配置（很重要）
ngnix的配置可以参考：Nginx 服务器安装及配置文件详解
配置文件代码
# main（全局设置） # worker角色的工作进程的个数 worker_processes 1; # 日志输出 error_log logs/error.log; events { # 每一个worker进程能并发处理（发起）的最大连接数 worker_connections 1024; } # http服务器 http { include mime.types; default_type application/octet-stream; # 开启高效文件传输模式 sendfile on; # 长连接超时时间，单位是秒 keepalive_timeout 65; # 虚拟主机配置 server { listen 80; # 监听端口，默认80 server_name 127.0.0.1; # 服务器名 location / { root html; # 定义服务器的默认网站根目录位置 index index.html; # 定义路径下默认访问的文件名，一般跟着root放 } # 如果调用的接口需要反向代理，可以配置如下，ApiPackageName对应接口包名字 location /ApiPackageName { # 模块http_proxy： # 请求转向backend定义的服务器列表，即反向代理 proxy_pass http://127.0.0.1:6666; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; # nginx跟后端服务器连接超时时间(代理连接超时) proxy_connect_timeout 90; proxy_send_timeout 90; # 连接成功后，与后端服务器两个成功的响应操作之间超时时间(代理接收超时) proxy_read_timeout 90; # 设置代理服务器（nginx）从后端realserver读取并保存用户头信息的缓冲区大小，默认与proxy_buffers大小相同，其实可以将这个指令值设的小一点 proxy_buffer_size 4k; # proxy_buffers缓冲区 proxy_buffers 4 32k; # 高负荷下缓冲大小（proxy_buffers*2） proxy_busy_buffers_size 64k; proxy_temp_file_write_size 64k; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_redirect off; } } }
html文件夹
比如我的html文件夹里有我的打包文件kaimoPackage包
kaimoPackage包里的文件结构
html
<!-- kaimo.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./css/css.css"> <title>kaimo</title> </head> <body> <h1 class="kaimo">欢迎来到nginx，我是kaimo.html页面</h1> <script src="./js/js.js"></script> </body> </html>
<!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>index</title> <link rel="stylesheet" href="./css/css.css"> </head> <body> <h1>欢迎来到nginx，我是index.html页面</h1> <script src="./js/js.js"></script> </body> </html>
css
/* css.css */ h1{ color: green; } .kaimo{ color: orangered; }
js
console.log('你是大坏蛋！嘤嘤嘤');
Nginx命令
在nginx的根目录添加三个.bat文件
1、nginx快捷启动
start ./nginx
2、nginx快捷停止
./nginx -s quit
3、nginx快捷重启
./nginx -s reload
启动
首先我们在conf文件夹里的nginx.conf里面进行nginx配置，然后把我们的打包文件夹放进html文件夹里面，然后快捷启动nginx。
访问配置好的server_name
1、访问index.html
2、访问kaimo.html
