最新博客地址：​​http://kaimo313.gitee.io/blogs/​​

环境

  • win10操作系统
  • nginx-1.11.10

Vue打包

vue脚手架打包，在cmd执行下面命令，自己命好包的名字。

npm

Nginx目录

主要关注画红框的文件跟文件夹：

  • ​​conf​​​：里面包含重要的配置文件​​nginx.conf​​
  • ​​html​​：里面放置Vue打包的文件夹
  • ​​logs​​：里面放置日志文件
  • ​​.bat文件​​：是可执行文件，由一系列命令构成，其中可以包含对其他程序的调用，在这里配置的就是快速操作命令

Vue打包怎么在本地用Nginx部署？_nginx

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​​包

Vue打包怎么在本地用Nginx部署？_vue_02

​​kaimoPackage​​包里的文件结构

Vue打包怎么在本地用Nginx部署？_html_03

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

Vue打包怎么在本地用Nginx部署？_html_04

2、访问kaimo.html

Vue打包怎么在本地用Nginx部署？_html_05