vue项目前缀nginx部署，解决刷新500 404等问题

  1. vue项目中创建路由设置base路径
  2. vue.confg.js配置publicPath(默认为：‘/’)
  3. nginx配置后重启项目

vue项目中的配置

背景

假如我有个项目，ip访问：http://10.11.12.13:8080/login
域名访问 https://test001.hhhhhh.com/login
加个路径 “h5”
IP访问应该为：http://10.11.12.13:8080/h5/login
域名访问应该为： https://test001.hhhhhh.com/h5/login

在vue中项目怎么配置呢？

项目一：vue2中使用webapck


（1）环境变量配置（.env.test）

   VUE_APP_

//指定路径
VUE_APP_SERVE_CATALOGUE  = '/h5'

//vue测试代理地址
VUE_APP_BASE_URL = '/h5/api'

VUE_APP_BASE_API = 'http://10.10.10.38:8888/'


（2）路由配置（router/index.js）

const router = new VueRouter({

  mode: "history",

  base: process.env.VUE_APP_SERVE_CATALOGUE,

  routes,

});

（3）接口请求配置（request.js）

const service = axios.create({

  baseURL: process.env.VUE_APP_BASE_URL || “/api”,

  // withCredentials: true, // send cookies when cross-domain requests

  timeout: 12000 // request timeout

})


（4）vue.confg.js 配置

  publicPath: process.env.VUE_APP_SERVE_CATALOGUE + "/",

  devServer: {

    port,

    proxy: {

      [process.env.VUE_APP_BASE_URL]: {

        target: process.env.VUE_APP_BASE_API,

        changeOrigin: true,

        pathRewrite: {

          [process.env.VUE_APP_BASE_URL]: "",

        },

      },

    },

  },

（5）webpack.dev.js或webpack.prod.js  

output: {

    path: resolve('dist'),

    filename: 'js/[name].[hash].js',

    chunkFilename: 'js/[name].[hash].js',

    publicPath: '/h5/',

  },

 

 选择使用vue.confg.js 或者webpack看自己的需求和习惯

项目二：vue3中使用vite.config.js


（1）环境变量配置（.env.test）
       VITE_APP_

VITE_APP_BASE_API = 'http://10.10.10.10:8888/'
VITE_APP_BASE_PUBLIC  = '/docmodel/'
VITE_APP_BASE_URL = '/docmodel/api'


(2)路由配置（router/index.ts）

const router = createRouter({

  history: createWebHistory(import.meta.env.VITE_APP_BASE_PUBLIC),

  routes,

});

(3）接口请求配置(request.js)

const baseURL = import.meta.env.VITE_APP_BASE_URL || "/api";

(4)vite.config.js
 

    base: VITE_APP_BASE_PUBLIC,

server: {

      port: 8080, // 本地服务端口

      cors: true,

      sourcemap: false, //是否构建source map 文件

      // 10月更新

      minify: "terser", // 混淆器，terser 构建后文件体积更小，'terser' | 'esbuild'

      chunkSizeWarningLimit: 1500, //chunk 大小警告的限制，默认500KB

      open: true, //在服务器启动时自动在浏览器中打开应用程序。当此值为字符串时，会被用作 URL 的路径名。

      strictPort: true, // 设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口

      proxy: {

        // 代理

        // 字符串简写写法

        // '/foo': 'http://localhost:4567/foo',

        // 选项写法

    [VITE_APP_BASE_URL]: {

          target: VITE_APP_BASE_API,

          changeOrigin: true,

          // secure: false,

          rewrite: (path) => path.replace(VITE_APP_BASE_URL, ""),

        },

        // 正则表达式写法

        // '^/fallback/.*': {

        //   target: 'http://jsonplaceholder.typicode.com',

        //   changeOrigin: true,

        //   rewrite: (path) => path.replace(/^\/fallback/, '')

        // }

      },

    }, 

nginx.配置

ip 方式一

10.10.10.10:9108/login

//不带路径的

server{
   listen 9108;
   access_log /opt/nginx/logs/nginx-9108.log;
   add_header Access-Control-Allow-Origin *;
   add_header Access-Control-Allow-Headers X-Requested-With;
   add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
   root  /home/finance/App/test/;
   location / {
     try_files $uri $uri/ /index.html;    
   }
   location ~.*\.(js|css|jpg|png|jpeg|gif|mp4|svg|woff|ico|tff)$ {
   expires 30d;
 }

}

带路径10.10.10.10:9108/h5/login

server{
   listen 9109;
   access_log /opt/nginx/logs/nginx-9109.log;
   add_header Access-Control-Allow-Origin *;
   add_header Access-Control-Allow-Headers X-Requested-With;
   add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
  # root  /home/finance/App/test/;
   location /h5/ {

     //histry的配置方式
     try_files $uri $uri/ /h5/index.html;
     alias /home/finance/App/test/;

     //hash的配置方式
     index index.html index.htm;
     proxy_http_version 1.1;
     add_header Access-Control-Allow-Origin *;
     add_header Access-Control-Allow-Headers X-Requested-With;
     add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
   }

  // 资源访问
    location ^/h5/(.*)\.(js|css|jpg|png|jpeg|svg|woff|ico|tff)$ {
     alias /home/finance/App/test/;
     expires 30d;
   }

   location ^~ /h5/api/ {
      proxy_pass  http://10.10.10.10:8888/;
   }

 }

IP配置方式2(重点)

server
{
   listen 9210;
   access_log /opt/nginx/logs/nginx-9210.log;
   add_header Access-Control-Allow-Origin *;
   add_header Access-Control-Allow-Headers X-Requested-With;
   add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
   location / {
      root /home/finance/App/test/;
      try_files $uri $uri/  /index.html;
      expires   0;
      index index.html index.htm;
      rewrite ^/h5/(.*) /$1 last;
      if ($uri ~ .*\.(ico|css|js|png|jpg|gif|jpeg|webp|ogg|mp3|wav|woff|woff2|ttf|eot|svg|json|zip|txt|docx)$) {
        expires   30d;
      }
   }

#注意这里 不是 /h5/api/  是 /api/
     location ^~ /api/ {
      proxy_pass  http://10.10.10.10:8888/;
   }

 }

 域名方式配置

server {
      listen 9000;
      charset utf-8;
      access_log /opt/nginx/logs/access.log main;
      add_header Access-Control-Allow-Headers *;
      add_header Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT";
      add_header Content-Security-Policy "upgrade-insecure-requests;connect-src *";
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection $connection_upgrade;
      client_max_body_size 2048m;

      location / {
        root /home/;
       }  

      #匹配路径 
       location /h5/ {
         try_files $uri $uri/  /h5/index.html;
         alias /home/finance/App/test/;
         index index.html index.htm;
       }

     #匹配资源

       location ^/h5/(.*)\.(js|css|jpg|png|jpeg|svg|woff|ico|tff)$ {
        alias  /home/finance/App/test/;
        expires 30d;
       }

     #接口代理

      location ^~/h5/api/{
                proxy_pass http://10.10.10.10:8888/;
               #   proxy_set_header   Host             $host;
                #  proxy_set_header   X-Real-IP        $remote_addr;
                #  proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
                #  proxy_http_version 1.1;
                #  proxy_set_header Upgrade $http_upgrade;
                #  proxy_set_header Connection $connection_upgrade;
        }
     //接口代理 

    location ^~/h5/dom/{
                proxy_pass http://xxxx.com.test/;
               #   proxy_set_header   Host             $host;
                #  proxy_set_header   X-Real-IP        $remote_addr;
                #  proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
                #  proxy_http_version 1.1;
                #  proxy_set_header Upgrade $http_upgrade;
                #  proxy_set_header Connection $connection_upgrade;
        }

 #ws代理
  location /asr/ {
      proxy_pass http://1010.10.10:8887/;           
      proxy_set_header Host $host;    
      proxy_http_version 1.1;
      proxy_set_header X-Client-IP $remote_addr;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_connect_timeout 60;
      proxy_read_timeout 600;
   }

}

应用之间反向代理

如果为了方便  https://test001.hhhhhh.com/h5/login 方向代理到 http://10.11.12.13:8080/h5/login

 怎么配置呢？

    location /video/ {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_http_version 1.1;
        proxy_pass http://test-obs.baidu.com/;
    }
    location /h5/ {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_http_version 1.1;
        proxy_pass http://10.11.12.13:8080/h5/;
    }


 

随笔一记，如能解决问题，麻烦点赞下

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/186343.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

什么是PDN的交流阻抗？

什么是PDN的交流阻抗？

什么是PDN的交流阻抗？ 在电力电子领域，PDN（Power Distribution Network）的交流阻抗是一个重要的概念，它反映了PDN在交流电源和负载之间传输电能的能力。了解PDN的交流阻抗对于优化电源设计、提高系统性能和可靠性具有重…
阅读更多...
SSM SpringBoot vue考勤信息管理系统

SSM SpringBoot vue考勤信息管理系统

SSM SpringBoot vue考勤信息管理系统 系统功能 登录 注册 个人中心 部门信息管理 上班时间管理 考勤信息管理 员工信息管理 签到管理 请假信息管理 加班申请管理 出差申请管理 开发环境和技术 开发语言：Java 使用框架: SSM(Spring SpringMVC Mybaits)或Spring…
阅读更多...
序列化-Serializable和Parcelable

序列化-Serializable和Parcelable

Serializable 在Android开发中，Serializable是一种用于将对象序列化和反序列化的接口。它是Java的标准序列化方式，可以在任何Java平台上使用。 下面是使用Serializable进行对象序列化的步骤： 在要序列化的类中实现Serializable接口&#x…
阅读更多...
珠宝模具3d仿真沉浸式交互展示更易分享传播

珠宝模具3d仿真沉浸式交互展示更易分享传播

3D云展会经过近几年的蓬勃发展，迅速受到参展企业和客户的多方认可和支持，那么随着市场再度恢复，各种展会络绎不绝，想要快速打造一个逼真的线上3D云展会成为企业刚需。3D云展会线上搭建平台是web3d开发公司深圳华锐视点根据领先的三…
阅读更多...
GESP编程冲刺第一天

GESP编程冲刺第一天

题目描述： 1. 画三角形 【问题描述】 输入一个正整数 n，请使用大写字母拼成一个这样的三角形图案（参考样例 输入输出）：三角形图案的第 1 行有 1 个字母，第 2 行有 2 个字母，以此类推&#xf…
阅读更多...
OPC UA使用opc.uafx.advanced开发客户端、服务端

OPC UA使用opc.uafx.advanced开发客户端、服务端

OPC在自动化行业使用很广泛，好一点的PLC支持OPC协议，比如国内的汇川、禾川PLC对应高端的PLC都支持OPC UA协议，低端一点的则使用Modbus和上位机通讯，或者TCP自定义格式。相比于modbus协议，OPC不用确定寄存器地址&#x…
阅读更多...
CSS 在性能优化方面的实践

CSS 在性能优化方面的实践

前言 CSS（层叠样式表）是一种用于描述网页外观和格式的语言。随着网页变得越来越复杂，CSS文件的大小也随之增加，这可能会对网页性能产生负面 .box {width: 100px;height: 100px;transition: transform 0.3s; }.box:hover {transf…
阅读更多...
全网最最全的Jmeter接口测试：jmeter_逻辑控制器_交替控制器Jmeter(22)：jmeter_逻辑控制器_交替控制器

全网最最全的Jmeter接口测试：jmeter_逻辑控制器_交替控制器Jmeter(22)：jmeter_逻辑控制器_交替控制器

交替控制器 该控制器包含的取样器步骤在每次循环中交替执行 交替控制器指每次运行一次时在交替控制器下的采样器只执行一个；如下图： 忽略子控制模块：如果勾选此项,交替控制器将子控制器像单一请求元素一样，一次 只允许一个请求/…
阅读更多...
Java中的JMX的使用

Java中的JMX的使用

文章目录 1. 定义和存在的意义2. 架构2.1 Instrumentation2.2 JMX Agent2.3 Remote Management 3. 启动和连接3.1 注册MBean3.2 有两个方式启动JMX Agent3.3 Remote Management(客户端) 4. MBeanServerConnection使用4.1 列出所有的MBean4.2 列出所有的Domain4.3 MBean计数4.4 …
阅读更多...
算法：Java计算二叉树从根节点到叶子结点的最大路径和

算法：Java计算二叉树从根节点到叶子结点的最大路径和

要求从根节点到叶子结点的最大路径和，可以通过递归遍历二叉树来实现。对于二叉树中的每个节点，我们都可以考虑包含该节点的最大路径和。在递归的过程中，我们需要不断更新全局最大路径和。 具体的思路 递归函数设计： 设计一个递归函…
阅读更多...
常用的设计模式

常用的设计模式

常用的设计模式： 一、单例模式 java中单例模式是一种常见的设计模式，单例模式的写法有好几种，这里主要介绍三种：懒汉式单例、饿汉式单例、双重检查锁定 1、单例模式有以下特点： 　　a、单例类只能有一个实例。 　　b…
阅读更多...
36.JavaScript补完计划：typescript

36.JavaScript补完计划：typescript

点赞收藏加关注，你也能住大别墅！ 一、什么是typescript 二、应用场景 我认为JavaScript的特点就是在于它强大的延展性，不仅蔓延到了后端，而且也逐渐成为代码世界无法被忽视的存在。那么，编写js代码时我们都会经常遇到…
阅读更多...
uniapp项目打包h5，支持文件协议，使用vconsole调试移动端

uniapp项目打包h5，支持文件协议，使用vconsole调试移动端

uniapp项目需要打包h5&#xff0c;并且需要嵌套到一个原生的移动端项目中&#xff0c;需要支持文件协议能直接访问 打包设置 设置./基础路径 引入vconsole调试移动端 <script src"https://unpkg.com/vconsole/dist/vconsole.min.js"></script>可以将…
阅读更多...
高效开发之：判断复杂list中的对象属性是否包含某个值

高效开发之：判断复杂list中的对象属性是否包含某个值

技术使用&#xff1a;使用了Java 8引入的Stream API以及Optional类。这些特性用于简化集合的处理和减少空指针异常。 List<ResourceInfoDto> authData chatBase.getData();String baseName dto.getBaseName();Optional<ResourceInfoDto> authWithResourceCode a…
阅读更多...
【Android Jetpack】Lifecycle 感知生命周期

【Android Jetpack】Lifecycle 感知生命周期

文章目录 背景示例LifeCycle的原理LifecycleOwner自定义LifecycleOwnerLifecycleObserver 示例改进使用LifecycleService解耦Service与组件整个应用进程的生命周期ProcessLifecycleOwner 背景 在Android应用程序开发中&#xff0c;解耦很大程度上表现为系统组件的生命周期与普…
阅读更多...
[跑代码]BK-SDM: A Lightweight, Fast, and Cheap Version of Stable Diffusion

[跑代码]BK-SDM: A Lightweight, Fast, and Cheap Version of Stable Diffusion

Installation(下载代码-装环境) conda create -n bk-sdm python3.8 conda activate bk-sdm git clone https://github.com/Nota-NetsPresso/BK-SDM.git cd BK-SDM pip install -r requirements.txt Note on the torch versions weve used torch 1.13.1 for MS-COCO evaluation…
阅读更多...
9.vue3项目（九）：spu管理页面的新增和修改

9.vue3项目（九）：spu管理页面的新增和修改

目录 一、SPU和SKU概念 二、SPU静态搭建 1.代码编辑 2.效果展示 三、封装接口以及出参入参
阅读更多...
windows远程桌面登录，提示：“出现身份验证错误，要求的函数不受支持”

windows远程桌面登录，提示：“出现身份验证错误，要求的函数不受支持”

问题&#xff1a; windows登录远程桌面&#xff0c;提示&#xff1a;“出现身份验证错误&#xff0c;要求的函数不受支持”&#xff0c;如下图&#xff1a; 问题原因&#xff1a; windows系统更新&#xff0c;微软系统补丁的更新将 CredSSP 身份验证协议的默认设置进行了调…
阅读更多...
Windows + docker + python + vscode : 使用容器docker搭建python开发环境，无需本地安装python开发组件

Windows + docker + python + vscode : 使用容器docker搭建python开发环境，无需本地安装python开发组件

下载docker for Windows docker window下载 如果没有翻墙工具&#xff0c;可以该网盘中的docker 链接&#xff1a;https://pan.baidu.com/s/11zLy3e5kusZR-4m_Fq_cqg?pwdesmv 提取码&#xff1a;esmv 安装docker docker的安装会重启电脑&#xff0c;不要惊讶&#xff0c;且…
阅读更多...
linux中 struct page 与物理地址的关系

linux中 struct page 与物理地址的关系

由struct page 找到对应物理地址 以sparse模型为例&#xff0c;每个numa node 有自己的物理地址。在初始化时&#xff08;sparse_init_nid&#xff09;会将可用内存按section&#xff08;比例32k个页&#xff09;大小分成若干section&#xff0c;在大于dma区的内存中为他分配一…
阅读更多...
最新文章

Copyright @ 2022~2023