windows下使用Nginx部署Vue项目

简介: windows下使用Nginx部署Vue项目

第一步:到nginx官网上下载相应的安装包,并解压;


第二步:进入到nginx目录,在CMD使用“start nginx.exe ”进行nginx的启动,启动成功后,在“任务管理器”中会看到“nginx.exe”进程在,浏览器地址栏输入:127.0.0.1,会看nginx欢迎界面;。(如果发现进程中并没有,那么说明启动失败,你可以输入ngnix查看是什么原因)


nginx的相关命令(.exe可以省略):


nginx.exe -s stop                  // 停止nginx
nginx.exe -s reload                // 重新加载nginx
nginx.exe -s quit                  // 退出nginx

第三步:Vue项目打包


dist文件夹:


去.png


更改nginx的config配置文件,里面的location部分(见注释)


#user  nobody;
worker_processes  1;
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#pid        logs/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
    #access_log  logs/access.log  main;
    sendfile        on;
    #tcp_nopush     on;
    #keepalive_timeout  0;
    keepalive_timeout  65;
    #gzip  on;
    server {
        listen       80;
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            root   C:\Users\23913\Desktop\dist;      # 更改为vue打包的dist目录
            index  index.html index.htm;
        }
  #代理后台接口
  location /api/ {         # 配置后台数据的接口 所有/Auth的请求都转发到后台地址
    proxy_pass  http://192.168.4.187:8000/;        # 后端地址
  }
        #error_page  404              /404.html;
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}
        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}
        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }
    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;
    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}
    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;
    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;
    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;
    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;
    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}
}


然后重启nginx,在浏览器地址栏输入:127.0.0.1即可运行!


相关文章
|
7月前
|
应用服务中间件 网络安全 nginx
手把手教你使用 Docker 部署 Nginx 教程
本文详解Nginx核心功能与Docker部署优势,涵盖镜像拉取、容器化部署(快速、挂载、Compose)、HTTPS配置及常见问题处理,助力高效搭建稳定Web服务。
3108 4
|
应用服务中间件 PHP nginx
今日小结通过aliyun的本地容器镜像部署我的nginx和php环境
简介: 本教程介绍如何基于 Dragonwell 的 Ubuntu 镜像创建一个运行 Nginx 的 Docker 容器。首先从阿里云容器镜像服务拉取基础镜像,然后编写 Dockerfile 确保 Nginx 作为主进程运行,并暴露 80 端口。最后,在包含 Dockerfile 的目录下构建自定义镜像并启动容器,确保 Nginx 在前台运行,避免容器启动后立即退出。通过 `docker build` 和 `docker run` 命令完成整个流程。
548 25
今日小结通过aliyun的本地容器镜像部署我的nginx和php环境
|
7月前
|
应用服务中间件 Linux nginx
在虚拟机Docker环境下部署Nginx的步骤。
以上就是在Docker环境下部署Nginx的步骤。需要注意,Docker和Nginix都有很多高级用法和细节需要掌握,以上只是一个基础入门级别的教程。如果你想要更深入地学习和使用它们,请参考官方文档或者其他专业书籍。
336 5
|
8月前
|
存储 数据安全/隐私保护 Windows
Windows中部署网盘神器 Filebrowser
ZeroNews (零讯)内网穿透赋予 FileBrowser 任意位置互联网访问的能力,无需用户具备固定公网IP,提供专用的访问域名,将 FileBrowser 转变为公有云盘,实现多用户在线协同工作。
|
12月前
|
应用服务中间件 Linux 网络安全
技术指南:如何把docsify项目部署到基于CentOS系统的Nginx中。
总结 与其他部署方法相比,将docsify项目部署到基于CentOS系统的Nginx中比较简单。以上步骤应当帮助你在不花费太多时间的情况下,将你的项目顺利部署到Nginx中。迈出第一步,开始部署你的docsify项目吧!
444 14
|
12月前
|
JSON 安全 数据可视化
Elasticsearch(es)在Windows系统上的安装与部署(含Kibana)
Kibana 是 Elastic Stack(原 ELK Stack)中的核心数据可视化工具,主要与 Elasticsearch 配合使用,提供强大的数据探索、分析和展示功能。elasticsearch安装在windows上一般是zip文件,解压到对应目录。文件,elasticsearch8.x以上版本是自动开启安全认证的。kibana安装在windows上一般是zip文件,解压到对应目录。elasticsearch的默认端口是9200,访问。默认用户是elastic,密码需要重置。
5862 0
|
Linux 虚拟化 Docker
Linux服务器部署docker windows
在当今软件开发中,Docker成为流行的虚拟化技术,支持在Linux服务器上运行Windows容器。流程包括:1) 安装Docker;2) 配置支持Windows容器;3) 获取Windows镜像;4) 运行Windows容器;5) 验证容器状态。通过这些步骤,你可以在Linux环境中顺利部署和管理Windows应用,提高开发和运维效率。
2277 1
|
Ubuntu 网络协议 Linux
快速部署WSL(Windows Subsystem for Linux)
WSL提供了一种轻量级的方法,使开发者能够在Windows上无缝运行Linux环境。通过本文介绍的步骤,可以快速安装、配置和使用WSL,以满足开发和测试的需求。
3062 8
|
JavaScript Windows
windows安装vue
windows安装vue
|
监控 应用服务中间件 网络安全
部署Django应用:使用Gunicorn和Nginx构建高效的生产环境
部署Django应用:使用Gunicorn和Nginx构建高效的生产环境
1210 0