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

最新推荐文章于 2024-08-11 13:18:04 发布

凯小默

最新推荐文章于 2024-08-11 13:18:04 发布

阅读量3.9k

点赞数 2

分类专栏： Vue 技术栈 Nginx / 服务器文章标签： vue 部署

本文链接：https://blog.csdn.net/kaimo313/article/details/100934719

版权

Vue 技术栈同时被 2 个专栏收录

122 篇文章 17 订阅

订阅专栏

Nginx / 服务器

1 篇文章 0 订阅

订阅专栏

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

环境

win10操作系统
nginx-1.11.10

Vue打包

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

npm run build

Nginx目录

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

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

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包

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

访问index.html

2、访问kaimo.html

访问kaimo.html

凯小默

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录