首页 > 系统相关 >Nginx配置vue项目模版

Nginx配置vue项目模版

时间:2023-04-25 12:33:04浏览次数:29  
标签:vue nginx 模版 rewrite h5 Nginx location test cms

1、hash模式时(#),nginx配置方法

    location ~ ^/test/cms-h5/{
        rewrite ^/test/cms-h5(.*)$ $1break;
        root/opt/nginx/web/cms-h5/dist;
    }

2、hisotry模式时,nginx配置方法

   location ~ ^/test/cms-h5/{
        try_files $uri@cms-h5;
    }
   location@cms-h5{
        rewrite ^/test/cms-h5(.*)$ $1break;
        try_files $uri /test/cms-h5/$uri//test/cms-h5/index.html;
        root/opt/nginx/web/plus/cms-h5/dist;
    }
或者
    location ~ ^/test/cms-h5/{
        rewrite ^/test/cms-h5(.*)$ $1break;
        try_files $uri /test/cms-h5/$uri//test/cms-h5/index.html;
        root/opt/nginx/web/plus/cms-h5/dist;
    }

3、备注

# 对于对象存储类的域名配置,建议增加请求头
通用配置(后端由nginx代理到minio)
    rewrite  ^/(.*).(svg|tif|tiff|wbmp|png|bmp|fax|gif|ico|jfif|jpe|jpeg|jpg|woff|cur|webp|swf|ttf|eot|woff2|css|js|txt|json|xhtml|html|map|rplib)$ /frontend/game/page/$1.$2 last;
    rewrite  ^/(.*)/? /frontend/game/page/index.html last;
    location / {
        if ($request_method = POST){
          return 403;
        }
        if ($request_method = PUT){
          return 403;
        }
        if ($request_method = DELETE){
          return 403;
        }
        proxy_set_header Host minio.herlly.cn;
        proxy_pass http://minio-nginx;
    }

标签:vue,nginx,模版,rewrite,h5,Nginx,location,test,cms
From: https://blog.51cto.com/zzzhao/6223763

相关文章

  • Nginx配置跳转HTTPS方法汇总
    1、采用nginx的rewrite方法#server{listen80;server_namedev.herlly.com;indexindex.htmlindex.phpindex.htm;access_log/usr/local/nginx/logs/8080-access.logmain;error_log/usr/local/nginx/logs/8080-error.log;rewrite^(.*)$......
  • Nginx实现流量复制
    1、简介Nginx自1.13.4开始引入nginx_mirror_module模块,利用此模块可以将线上实时流量镜像至其他环境,而Nginx最终会丢弃mirror的响应,从而不影响源站请求的响应。2、配置upstreambackend{serverbackend.server:10000;}upstreamtest_backend{servertest.server:......
  • Vue2项目实战尚品汇 项目的路由分析
    视频5)路由的配置vue-router路由分为KVnode平台(并非语言)对于后台而言:K即为URL地址V即为相应的中间件http://localhost:8080/0607app.get("/0607",(res,req)=>{res.send('我是祖国的老花骨朵');});前端路由:K即为URL(网络资源定位符)V即为相应的路由组件5.1路由的一......
  • nginx解决Ajax跨域问题
    今天遇到一个ajax跨域问题,下拉框的数据源要从一个接口获得,但是该接口被部署到另外一台服务器上,在本地可以通过http请求访问,并可以返回json的数据,但是放到页面中不可以获取到下拉框的值,发现chrome控制台中该请求成功,但是没有返回值,于是便遇到了跨域的问题,请教一同事,问题得到解决:1.搭......
  • vue3-sign 手写签名组件
    一个简易签名组件,基于vue3和canvas。#安装npmi@sangtian152/vue3-sign-S#oryarnadd@sangtian152/vue3-sign引入在main.js中写入以下内容:import{createApp}from'vue'importvue3Signfrom'@sangtian152/vue3-sign';import"@sangtian152/vue3-s......
  • Nginx常用配置及和基本功能讲解
    作者:京东物流 殷世杰Nginx已经广泛应用于J-one和Jdos的环境部署上,本文对Nginx的常用的配置和基本功能进行讲解,适合Nginx入门学习。1核心配置找到Nginx安装目录下的conf目录下nginx.conf文件,Nginx的基本功能配置是由它提供的。Nginx的配置文件(conf/nginx.conf)整体上分为如下几个......
  • vue3+jointjs 使用模板添加元素
    关于如何在Vue3和JointJS中使用拖拽模板来创建节点元素,可以按照以下步骤进行:1.安装JointJS使用npm进行安装:```npminstalljointjs```2.在Vue3中创建JointJS容器在Vue3中创建一个组件,用于创建JointJS的画布和节点。在组件的生命周期方法`mounted`......
  • 前端vue使用jsencrypt进行RAS加密/解密
    前端安装:npminstalljencrypt--sava在utils下创建jsencrypt.js文件,内容如下:importJSEncryptfrom"jsencrypt/bin/jsencrypt.min";/**RSA秘钥对生成网站http://web.chacuo.net/netrsakeypair*//**公钥512位*/constpublicKey='MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJ......
  • Vuex
    Vuex概念在Vue中实现集中式状态(数据)管理的一个Vue的插件,对Vue应用中多个组件的共享状态进行集中式管理(读/写),也是一种组件间通信的方式,且适用于任意组件间的通信。使用场景多个组件需要共享数据时。搭建Vuex环境ps:vue2只能使用Vuex3,Vue3只能使用Vue41.创建文件:src/sto......
  • LINUX安装nginx详细步骤
    1.安装依赖包//一键安装上面四个依赖yum-yinstallgcczlibzlib-develpcre-developensslopenssl-devel2.下载并解压安装包cd/usr/localmkdirnginxcdnginx//下载tar包wgethttp://nginx.org/download/nginx-1.13.7.tar.gztar-xvfnginx-1.13.7.tar.gz3.安装n......