nginx部署vue项目(成功详细版本)

简介: nginx部署vue项目(成功详细版本)

1.安装


去nginx官网安装稳定版本


nginx news

http://nginx.org/

image.png

image.png



下载好以后直接解压就行(里面的内容如下图)

image.png



2.配置


(1)将打包好的dist文件夹放进html文件夹里面

image.png

image.png



(2)修改conf目录下的nginx.conf文件

image.png



server { listen       8887;#设置监听的端口
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            root   html/dist; #nginx里html的dist文件夹路径 主要修改这一行 默认值是html 改成我这样就可以
            index  index.html index.htm;
        }
        #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
        #因此需要rewrite到index.html中,然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
        # location / {
        #     root   html;
        #     index  index.html index.htm;
        # }
        #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;
        } #....... }

(3)启动(双击nginx.exe文件夹就行)

image.png

(4)坑

每次修改配置文件的时候在当前目录下的命令行敲


nginx -s reload

image.png

(5)关于更多的nginx命令在我其余博客文章可以看到


目录
相关文章
|
8天前
|
弹性计算 运维 监控
快速部署 Nginx 社区版
Nginx是一个高性能的HTTP和反向代理服务器。Nginx在计算巢上提供了社区版服务,您无需自行配置云主机,即可在计算巢上快速部署Nginx服务、实现运维监控,从而方便地基于Nginx搭建您自己的应用。本文介绍使用如何通过计算巢快速部署Nginx社区版。
快速部署 Nginx 社区版
|
24天前
|
前端开发
vue3+ts项目中使用mockjs
vue3+ts项目中使用mockjs
243 58
|
6天前
|
JavaScript
vue项目中使用vue-router进行路由配置及嵌套多级路由
该文章详细说明了如何在Vue项目中配置和使用vue-router进行单页面应用的路由管理,包括设置嵌套路由和实现多级路由导航的示例。
vue项目中使用vue-router进行路由配置及嵌套多级路由
|
3天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
12 4
|
3天前
|
JavaScript
vue尚品汇商城项目-day07【51.路由懒加载】
vue尚品汇商城项目-day07【51.路由懒加载】
13 4
|
3天前
|
JavaScript 应用服务中间件 开发工具
vue尚品汇商城项目-day07【53.nginx反向代理配置】
vue尚品汇商城项目-day07【53.nginx反向代理配置】
13 4
|
3天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
9 2
|
4天前
|
API UED
如何实现Vue2项目升级Vue3?
如何实现Vue2项目升级Vue3?
11 1
|
6天前
|
应用服务中间件 nginx Docker
docker应用部署---nginx部署的配置
这篇文章介绍了如何使用Docker部署Nginx服务器,包括搜索和拉取Nginx镜像、创建容器并设置端口映射和目录映射,以及如何创建一个测试页面并使用外部机器访问Nginx服务器。
|
6天前
|
JavaScript
vue项目中引入阿里图标iconfont
该文章指导如何在Vue项目中引入并使用阿里图标库Iconfont,包括图标的选取、下载配置文件及在项目中引入和使用图标的具体步骤。
下一篇
无影云桌面