Nginx 如何部署指定文件夹下的项目(本地测试)

 更新时间:2024年01月31日 11:29:09   作者:一个博客  
这篇文章主要介绍了Nginx 如何部署指定文件夹下的项目(本地测试),分为配置vue.config.js,指定生成环境的包,配置路由模式为hash(history模式刷新后,找不到页面),本文讲解的非常详细,需要的朋友可以参考下

1、配置 vue.config.js,指定生成环境的包

  //部署生产环境和开发环境下的URL
  publicPath: process.env.NODE_ENV === 'production' ? "/marketing" : "/",
  ///npm run build 或 varn build  生成文件的日录名称(要利baseUrl的牛产环境路一致)(默认dist)
  outputDir:'marketing',
  //用于放置生成的静态资源(js、css、img、fonts)的;(项目打包之后,静态资源会放在这个文件夹下)
  assetsDir:'static',

2、配置路由模式为hash(history模式刷新后,找不到页面)

在这里插入图片描述

3、修改 Nginx 下的配置文件

C:\server\nginx-1.24.0\conf\nginx.conf

    server {
        listen       80;
        server_name  localhost;   //前端访问时需要的ip,默认127.0.0.1或localhost
        #charset koi8-r;
        location  /marketing{
				root   C:/server;
                index  index.html index.htm;
                #解决刷新后nginx报404问题
                try_files $uri $uri/ /marketing/index.html;
       }
    }

4、浏览器输入 localhost/marketing

注意:
因为使用nginx访问静态资源时,路径名要和实际路径名匹配(root路径+location路径,意思是nginx是按照C:/server/marketing这个路径去寻找资源)

到此这篇关于Nginx 部署指定文件夹下的项目(本地测试)的文章就介绍到这了,更多相关Nginx 部署指定文件夹下的项目(本地测试)内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • nginx实现多个域名和集群的方法步骤

    nginx实现多个域名和集群的方法步骤

    本文主要介绍了nginx实现多个域名和集群的方法步骤,需要配置Nginx作为反向代理服务器,将来自不同域名的请求转发到集群中的相应后端服务器,感兴趣的可以了解一下
    2024-04-04
  • Nginx代理后HTTP头部丢失问题的解决方案

    Nginx代理后HTTP头部丢失问题的解决方案

    在日常开发和运维中,我们经常会使用 Nginx 作为反向代理服务器,将客户端的请求转发到后端服务,然而,在某些情况下,通过 Nginx 代理后,后端服务可能会丢失部分 HTTP 头部信息,所以本文给大家介绍了Nginx代理后HTTP头部丢失问题的解决方案,需要的朋友可以参考下
    2025-02-02
  • Nginx配置WebSocket代理的示例代码

    Nginx配置WebSocket代理的示例代码

    本文提供了关于Nginx的配置和日志记录的详细指南,介绍了如何使用whereis命令查找Nginx路径,并通过man命令查看手册,同时,详解了解Nginx访问日志的配置方法及参数含义,并分享了Nginx代理WebSocket的配置示例,感兴趣的可以了解一下
    2024-10-10
  • 使用Nginx让网站快速置灰的方法

    使用Nginx让网站快速置灰的方法

    这篇文章主要介绍了使用Nginx让网站快速置灰的方法,首先是查看当前编译的版本是否支持http_sub_module模块,如果不支持需要重新编译增加此模块,具体配置方法参考下本文
    2023-11-11
  • nginx升级到支持HTTP2.0的方法示例

    nginx升级到支持HTTP2.0的方法示例

    这篇文章主要介绍了nginx升级到支持HTTP2.0的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • nginx下部署vue项目的方法步骤

    nginx下部署vue项目的方法步骤

    这篇文章主要介绍了nginx下部署vue项目的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 通过nginx反向代理来调试代码的实现

    通过nginx反向代理来调试代码的实现

    这篇文章主要介绍了通过nginx反向代理来调试代码的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • Linux下Nginx负载均衡多个tomcat配置的方法步骤

    Linux下Nginx负载均衡多个tomcat配置的方法步骤

    这篇文章主要介绍了Linux下Nginx负载均衡多个tomcat配置的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • 使用Nginx+Tomcat实现负载均衡的全过程

    使用Nginx+Tomcat实现负载均衡的全过程

    很多用到nginx的地方都是作为静态伺服器,这样可以方便缓存那些静态文件,比如CSS,JS,html,htm等文件,下面这篇文章主要给大家介绍了关于使用Nginx+Tomcat实现负载均衡的相关资料,需要的朋友可以参考下
    2022-05-05
  • Nginx中的文件下载服务器详解

    Nginx中的文件下载服务器详解

    利 用Nginx的诸多内置指令可实现自动生成下载文件列表 页、限制下载带宽等功能,这篇文章给大家介绍Nginx中的文件下载服务器功能,感兴趣的朋友一起看看吧
    2024-06-06

最新评论