nginx配置vue项目添加访问前缀

2023-11-02

前言

最近,在搞一个SASS系统,将原有的单服务,每次卖出一套啥软件就需要部署一套环境,使得运维人员有些捉襟见肘。产品调整为SASS,旨在为了将运维的工作减轻。

实现需求

功能实现完成了,就需要为每个租户配置自己的租户访问地址,其实最后指向的都是一套服务及页面!

实现的需求:就是通过访问如下地址:
http://192.168.0.118:38888/current_juser

其实也很好理解, 我们后台映射的前端页面地址就是IP+端口,如上http://192.168.0.118:38888

现在想通过在加上后面的current_juser来实现访问后端页面。

Nginx配置访问前端

正确配置

   server {
        listen       38888;
        server_name  localhost;
        location /current_juser{
          alias  /home/deploy/operate/dist/;
          index  index.html index.htm;
        }
        location ~.*(js|css|png|gif|jpg|mp3|ogg)$ {
          root /home/deploy/operate/dist/;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }   

上面是我们的正确配置,接下来我们看一下注意点

注意点

在这里插入图片描述
从上图中,我们看到了两个红色框框圈中的内容,我们来看一下具体的内容:

alias的含义

Nginx他指定文件路径是有两种方式root和alias来实现的,这两者的用法区别在于对URI的处理方法不同。

要讲到alias那么就必须说一下他和root的区别:
1、alias是一个目录别名的定义,root则是最上层目录的定义。
2、还有一个重要的区别是alias后面必须要用“/”结束,否则会找不到文件的。而root则可有可无。

举个栗子

alias:

location /testAlias/{
	alias /tools/nginx/html/admin/;
}

这个配置的意思就是访问/testAlias/目录里面的文件时,ningx会自动去/tools/nginx/html/admin目录找文件。

root:

location /testRoot/ {
	root /tools/nginx/html/admin;
}

#若按照这种配置的话,则访问testRoot/目录下的文件时,nginx会去/tools/nginx/html/admin/testRoot下找文件。

静态文件及js等404错误

第二个红框就是帮我们解决这个404的问题,如果我们没有配置此信息,则会造成js或者css等静态文件的404,导致我们的页面无法正常打开。

我们看一下如果不配置的错误提示,如下:

在这里插入图片描述
我们将鼠标放在右侧的ip处,可以看到错误信息,在上面会显示页面访问的完整路径。提示我们找不到这个文件。

通过添加红框内的配置,location说明如果你要访问js,png,css等结尾的文件,你需要在你的访问路径前加上root。

这个root实际上就是替换了网页上的http://192.168.0.118:38888。如果加了这个location,那么网页在访问http://192.168.0.118:38888/xxx/xxx/xxx.js。这个路径的时候,因为文件结尾是js匹配到了这个location,然后网页就会访问

root+[匹配路径],即为: /home/deploy/operate/dist/xxx.js,这样就找到文件了。

欢迎大家点击下方卡片,关注《coder练习生》

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

nginx配置vue项目添加访问前缀 的相关文章

  • { ...obj1, obj2 } 到底做什么[重复]

    这个问题在这里已经有答案了 假设我们有两个对象 const state fishes some obj data animals some obj data const animals some NEW data 在Vuex中有一个方法re
  • 未向导出的模块提供此上下文

    我对问题的提出感到不满意 受到鼓励提出改进建议 另外 请记住 由于无知 无知导致烦恼 我对问题的诊断可能有缺陷 对于那个很抱歉 In 这个答案 https stackoverflow com a 40893583 1525840建议使用th
  • 在新窗口中打开 VueJS 组件

    我有一个只有一页的基本 VueJS 应用程序 它不是 SPA 而且我不使用 vue router 我想实现一个按钮 单击该按钮时会使用我的 Vue 组件之一的内容执行 window open 函数 查看来自的文档window open ht
  • 如何以编程方式启动 Vuetify 对话框并等待响应

    我对 Vue js 和 Vuetify 相当陌生 使用 AngularJS 好几年了 但我们公司正在转向 Vue js 我想要完成的是 当用户单击 登录 按钮时 它会执行一些检查 即用户名不能为空 并启动 Vuetify 对话框来提醒用户
  • 从组件传递数据

    我对 Vue 相当陌生 我正在尝试将数据从组件传递到视图 我不确定我是否在使用props正确的 我有一个对话框 当我保存时 我想将数据插入数据库 我也想重复使用addCustomer function 这就是为什么我没有将该函数放置在组件中
  • Laravel 5 - URL 查询字符串的 NGINX 服务器配置问题

    Laravel 没有从 URL 查询字符串接收任何 GET 变量 GET 和 Input all 为空 Example example app ex login php country US country US 从未出现在我的 GET 变
  • nginx设置问题

    我知道这不是一个直接的编程问题 但是 stackoverflow 上的人似乎能够回答任何问题 我有一台运行 Centos 5 2 64 位的服务器 非常强大的双核 2 服务器 具有 4GB 内存 它主要提供静态文件 Flash 和图片 当我
  • Vue中有类似React.Fragment的东西吗?

    在 React 中我可以做这样的事情 parent component export default return div div 1 div div
  • 使用 aws elastic beanstalk 将非 www 重定向到 www

    我正在使用 Elastic Beanstalk 并按照说明使用 Express Web 服务器部署我的应用程序 如下所示 http docs aws amazon com elasticbeanstalk latest dg create
  • 左侧导航菜单上部隐藏

    当滚动到页面最底部时 左侧导航菜单的顶部将被隐藏 The image before scrolling is shown below 滚动后的效果如下图 我不确定此问题的确切原因 因此我将不胜感激任何有关识别和解决该问题的建议或帮助 为了确
  • 不知道如何预览我生成的 Nuxt3 应用程序

    我刚刚在静态模式下创建了一个 Nuxt3 但我不想每次都将其推送到 Netlify 进行预览 这是我的nuxt config js 没有改变 import defineNuxtConfig from nuxt export default
  • 如何在不使用变换或顶部/左侧的情况下转换列表中项目的位置

    有一天我偶然发现一个例子 https codepen io itslit pen gvKrMY它使用 Vue js 但我的问题更多是关于 Vue 用于实现状态之间转换的 CSS 和 HTML 卡片暂时获得等级 shuffleMedium m
  • Vue js动态导入组件

    我有以下父组件 它必须呈现动态子组件列表
  • 如何处理 Nuxt 中导致页面渲染崩溃的 apollo 客户端错误?

    我目前正在维护一个生产 Nuxt js Vue 应用程序 该应用程序集成了 GraphQL Apollo 客户端 该客户端遇到页面渲染错误 为了增加获得回复的机会 我构建了一个简单的代码示例 仅展示我们遇到的问题 谢谢大家 源代码 Clie
  • Vuejs 2:去抖动不适用于手表选项

    当我在 VueJs 中反跳此函数时 如果我提供毫秒数作为原语 它就可以正常工作 但是 如果我将其提供为对 prop 的引用 它会忽略它 这是道具的缩写版本 props debounce type Number default 500 这是不
  • Vue警告无法解析组件:ion-icon

    以下的用法如下https ionicons com usage https ionicons com usage the ion icon显示但我收到此警告 Failed to resolve component ion icon 我的步骤
  • 可排序不拖动 safari 中表格的所有列

    我有一个vue引导表 https bootstrap vue org docs components table使用 v 槽为每个单元使用自定义模板 所有这些单元格都是自定义组件 我希望该表的行可以排序 也就是说 我希望用户能够拖放该表中的
  • 在 Vue.js 中从父组件执行子方法

    目前 我有一个 Vue js 组件 其中包含其他组件的列表 我知道使用 vue 的常见方式是将数据传递给孩子 并从孩子向父母发出事件 但是 在这种情况下 我想在子组件中的按钮出现时执行子组件中的方法 parent被点击 哪种方法最好 一种建
  • 如何将 Google Charts 与 Vue.js 库一起使用?

    我正在尝试使用 Vue js 库使用 Google Charts 制作图表 但我不知道如何添加到 div 这是我尝试做的 这是如何使用普通 javascript 添加图表 这是文档的代码示例 https developers google
  • 简单的 Vue.js 计算属性说明

    我对 Vue js 并不陌生 但我会再次浏览文档 试图找出我第一次错过的任何内容 我在以下地方看到了这个声明使用计算属性的基本示例部分 https v2 vuejs org v2 guide computed html Basic Exam

随机推荐