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启动不了原因解决(端口占用),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • 基于Nginx搭建WebDAV服务的详细过程

    基于Nginx搭建WebDAV服务的详细过程

    在搭建 Joplin 笔记服务的时候,发现了可以通过 WebDAV 服务来实现云笔记的功能,所以本篇就来介绍一下,怎么快速搭建 WebDAV 服务,需要的朋友可以参考下
    2022-12-12
  • nginx与apache限制ip并发访问 限制ip连接的设置方法

    nginx与apache限制ip并发访问 限制ip连接的设置方法

    nginx限制ip并发数,也是说限制同一个ip同时连接服务器的数量,要使apache服务器做对同一IP地址的连接限制,需要mod_limitipconn来实现。一般需要手动编译。不过模块作者也提供了一些编译好的模块,根据自己的apache版本可以直接使用
    2012-11-11
  • 深入理解Nginx之error_page模块的使用

    深入理解Nginx之error_page模块的使用

    error_page是nginx一个重要的指令,作用是定制化服务器错误页面,本文主要介绍了Nginx之error_page模块的使用,具有一定的参考价值,感兴趣的可以了解一下
    2023-09-09
  • Nginx配置文件(nginx.conf)配置详解(总结)

    Nginx配置文件(nginx.conf)配置详解(总结)

    本篇文章主要介绍了Nginx配置文件(nginx.conf)配置详解,这对初学者有一定的参考价值,有兴趣的可以了解一下。
    2016-12-12
  • 利用nginx+lua+redis实现反向代理方法教程

    利用nginx+lua+redis实现反向代理方法教程

    这篇文章主要给大家介绍了利用nginx+lua+redis实现反向代理方法教程,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-05-05
  • Nginx隐藏版本号的方法

    Nginx隐藏版本号的方法

    这篇文章主要介绍了Nginx隐藏版本号的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • 使用google-perftools优化nginx在高并发时的性能的教程(完整版)

    使用google-perftools优化nginx在高并发时的性能的教程(完整版)

    如果使用googler开发的google-perftools优化Nginx和MySQL的内存管理,性能将会有一定程度的提升。特别是对高并发下的服务器,效果更明显
    2013-02-02
  • nginx服务器实现上传下载文件的实例代码

    nginx服务器实现上传下载文件的实例代码

    这篇文章主要介绍了nginx服务器实现上传下载文件的实例代码,本文通过代码给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-02-02
  • Nginx实现正向代理实例

    Nginx实现正向代理实例

    这篇文章主要介绍了Nginx实现正向代理实例,正向代理的作用在于正向代理隐藏了用户,用户的请求被代理服务器接收代替,到了服务器,服务器并不知道用户是谁,需要的朋友可以参考下
    2023-08-08

最新评论