Vue打包怎么在本地用Nginx部署？-阿里云开发者社区

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

2023-02-18 361

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

环境

win10操作系统
nginx-1.11.10

Vue打包

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

npm run build

Nginx目录

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

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

aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS85LzE3LzE2ZDNlYWI2N2QxZTk3Yzk.png

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包

aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS85LzE3LzE2ZDNlYWM0Y2YxZmY5ODE.png

kaimoPackage包里的文件结构

aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS85LzE3LzE2ZDNlYWNkOGFhMTI3Mzg.png

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

aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS85LzE3LzE2ZDNlYWQ3Y2QzOWRkMDU.png

2、访问kaimo.html

aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS85LzE3LzE2ZDNlYWRiZDY0ZWY1MmQ.png