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

  • win10操作系统
  • nginx-1.11.10

Vue打包

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

npm run build
复制代码

Nginx目录

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

  • conf :里面包含重要的配置文件 nginx.conf
  • html :里面放置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。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章