nginx部署vue项目(访问路径加前缀)

nginx部署vue项目(访问路径加前缀)

nginx部署vue项目,访问路径加前缀分为两部分:
(1)修改vue项目;
(2)修改nginx配置;

vue项目修改

需注意,我这是vue-cli3配置,vue-cli2不一样,参考此文章

以下为配置及示例,示例中我的路由前缀是5g_tob_group_web,替换成自己的即可

静态资源前缀

静态资源前缀 vue.config.js /module.exports 配置 publicPath:“/前缀”
在这里插入图片描述

路由前缀

静态资源前缀 vue.config.js /module.exports 配置 publicPath:“/前缀”
在这里插入图片描述

nginx配置修改

配置示例如下:

server {listen 9010;server_name 127.0.0.1;location /5g_tob_group_web {# 允许跨域配置add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';# 打包之后的前端项目路径alias D:/5g_tob_web_new/dist/;index index.html;try_files $uri $uri/ /index.html last;}
}

到此配置即为完成,启动nginx访问即可,按照我的配置路径是:http://127.0.0.1:9010/5g_tob_group_web

参考文章:
https://blog.csdn.net/qqjuanqq/article/details/131612705
https://blog.csdn.net/qq_27575627/article/details/130215619
https://www.php.cn/faq/549298.html

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

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

相关文章

npm 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。

一、报错: npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确, 然后再试一次。 所在位置 行:1 字符: 1npm init -y~~~ CategoryInfo : ObjectNotFo…

uniapp开发h5引入第三方js(sdk)

manifest.json 应用配置 | uni-app官网 根据文档上描述需要自定义模板的场景为: 方法一: 起初以为是在原有的index.html基础上再新建一个html文件,在项目根目录建立一个template.h5.html(仿照hello-uni-app项目)&…

Linux下程序(C语言)实现对文件的复制

目标&#xff1a; 使用系统调用实现cp命令。 原理&#xff1a; 使用系统调用fopen打开文件&#xff0c;使用fgets()从文件读数据&#xff0c;使用fputs() 向文件写数据。 linux 文件 创建命令为 vi (文件名&#xff09;.c 文件源码&#xff1a; #include<stdio.h>…

【微服务保护】Sentinel 流控规则 —— 深入探索 Sentinel 的流控模式、流控效果以及对热点参数进行限流

文章目录 前言一、快速掌握 Sentinel 的使用1.1 什么是簇点链路1.2 Sentinel 的简单使用示例 二、Sentinel 流控模式2.1 直接模式2.2 关联模式2.3 链路模式 三、流控效果3.1 快速失败3.2 预热模式3.3 排队等待 四、对热点参数的流控4.1 热点规则4.2 热点规则演示 前言 微服务架…

【数据结构】八大排序

目录 1. 排序的概念及其作用 1.1 排序的概念 1.2 排序运用 1.3 常见的排序算法 2. 常见排序算法的实现 2.1 插入排序 2.1.1 基本思想 2.1.2 直接插入排序 2.1.3 希尔排序&#xff08;缩小增量排序&#xff09; 2.2 选择排序 2.2.1 基本思想 2.2.2 直接选择排序 2.2…

【LeetCode】144. 二叉树的前序遍历 [ 根结点 左子树 右子树 ]

题目链接 文章目录 Python3方法一&#xff1a; 递归 ⟮ O ( n ) ⟯ \lgroup O(n) \rgroup ⟮O(n)⟯方法二&#xff1a; 迭代 ⟮ O ( n ) ⟯ \lgroup O(n) \rgroup ⟮O(n)⟯方法三&#xff1a; Morris ⟮ O ( n ) 、 O ( 1 ) ⟯ \lgroup O(n)、O(1) \rgroup ⟮O(n)、O(1)⟯ C…

基于Java的人事考勤签到管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09; 代码参考数据库参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&am…

从头开始使用 KNN 进行 KNN 和 MNIST 手写数字识别的初学者指南

一、说明 MNIST &#xff08;“修改后的国家标准与技术研究所”&#xff09;是事实上的计算机视觉“hello world”数据集。自 1999 年发布以来&#xff0c;这个经典的手写图像数据集一直作为分类算法基准测试的基础。随着新的机器学习技术的出现&#xff0c;MNIST 仍然是研究人…

[AUTOSAR][诊断管理][$11] 复位服务

文章目录 一、简介(1) 应用场景&#xff08;2&#xff09; 请求格式&#xff08;3&#xff09; 重启类型 二、示例代码(1) 11_ecu_reset.c 一、简介 ECU复位服务就是可以此诊断指令来命令ECU执行自复位&#xff0c;复位有多种形式&#xff0c;依据子功能参数来区分&#xff08…

【JavaEE】synchronized原理 -- 多线程篇(6)

synchronized原理 1. synchronized具体采用了哪些加锁策略?2. synchronized内部实现策略(内部原理)2.1 偏向锁2.2 轻量级锁与重量级锁 3. synchronized 的其它优化策略3.1 锁消除3.2 锁的粒度 4. 总结 1. synchronized具体采用了哪些加锁策略? synchronized既是悲观锁, 也是…

Flow深入浅出系列之在ViewModels中使用Kotlin Flows

Flow深入浅出系列之在ViewModels中使用Kotlin FlowsFlow深入浅出系列之更聪明的分享 Kotlin FlowsFlow深入浅出系列之使用Kotlin Flow自动刷新Android数据的策略 Flow深入浅出系列之在ViewModels中使用Kotlin Flows Flow出现后&#xff0c;LiveData仍然可以用&#xff0c;并且…

Vue动态class

注意在自定义组件上绑定class会添加到该组件的根元素上面 1.对象语法 传入class对象v-bind:class 指令也可以与普通的 class attribute 共存可以动态修改class的值可以绑定一个计算数据来实现 1.传入class对象 <script src"./vue.js"></script><di…

【第二天】C++类和对象解析:构造函数、析构函数和拷贝构造函数的完全指南

一、类的引出概述 在c语言结构体中&#xff0c;行为和属性是分开的&#xff0c;万一调用错误&#xff0c;将会导致问题发生。c中类将数据和方法封装在一起&#xff0c;加以权限区分&#xff0c;用户只能通过公共方法 访问 私有数据。 二、封装 封装特性包含两个方面&#xff0…

【C++】-c++的类型转换

&#x1f496;作者&#xff1a;小树苗渴望变成参天大树&#x1f388; &#x1f389;作者宣言&#xff1a;认真写好每一篇博客&#x1f4a4; &#x1f38a;作者gitee:gitee✨ &#x1f49e;作者专栏&#xff1a;C语言,数据结构初阶,Linux,C 动态规划算法&#x1f384; 如 果 你 …

自然语言处理---Self Attention自注意力机制

Self-attention介绍 Self-attention是一种特殊的attention&#xff0c;是应用在transformer中最重要的结构之一。attention机制&#xff0c;它能够帮助找到子序列和全局的attention的关系&#xff0c;也就是找到权重值wi。Self-attention相对于attention的变化&#xff0c;其实…

使用vscode搭建虚拟机

首先vscode插件安装 名称: Remote - SSH ID: ms-vscode-remote.remote-ssh 说明: Open any folder on a remote machine using SSH and take advantage of VS Codes full feature set. 版本: 0.51.0 VS Marketplace 链接: https://marketplace.visualstudio.com/items?it…

黑豹程序员-架构师学习路线图-百科:MVC的演变终点SpringMVC

MVC发展史 在我们开发小型项目时&#xff0c;我们代码是混杂在一起的&#xff0c;术语称为紧耦合。 如最终写ASP、PHP。里面既包括服务器端代码&#xff0c;数据库操作的代码&#xff0c;又包括前端页面代码、HTML展现的代码、CSS美化的代码、JS交互的代码。可以看到早期编程就…

基于SSM的快递管理系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

proteus中仿真arduino的水位测试传感器

一、原理介绍 我们这里使用的水位传感器&#xff0c;只能说是一个小实验用途的水位传感器。我们首先上图 如上图所示&#xff0c;线没有连接&#xff0c;传感器由许5对裸露在外的铜线片作为传感部分&#xff0c;当浸入水中时这些铜线片会被水桥接。 这些被水连接起来的铜线&a…

【NPM】vuex 数据持久化库 vuex-persistedstate

在 GitHub 上找到&#xff1a;vuex-persistedstate。 安装 npm install --save vuex-persistedstate使用 import { createStore } from "vuex"; import createPersistedState from "vuex-persistedstate";const store createStore({// ...plugins: [cr…