nginx vue2+webpack 和 vue3+vite 配置二级目录访问

简介: nginx vue2+webpack 和 vue3+vite 配置二级目录访问

我们开发中会遇到这样的需求,让我们用服务器nginx部署一个用域名的二级目录来访问项目

https:xxx/二级目录/来放访问项目



思路

将项目中的访问路由和静态资源文件,都加上要配置的二级目录,然后配置nginx的二级目录就ok了

首先我们要配置一个106.13.0.11:8083/qfqzApp的二级路由,针对于vue2项目,我们需要进行一下操作。

1、nginx配置(vue2 和 vue3配置的nginx相同)

server {
    listen 8083;     #1.监听访问端口
     server_name 106.13.0.11;     #2.当前服务器ip或者域名或者localhost
     # 这里要写成末尾不带"/"的形式,如果写成"/qfqzApp/"单单访问106.13.0.11:8083/qfqzApp会404
     location /qfqzApp { 
        alias   /usr/web/qfqz/dist/;     # 这里配置alias(配置root的话,必须了解访问规则)
        index index.html index.htm;
        try_files $uri $uri/ /qfqzApp/index.html;     # 这里在/index.html的基础上,前面需要加上/qfqzApp
        gzip_static on;
     }
 }

2、vue2+webpack的配置

(1)vue.config.js配置

配置

module.exports = {
  publicPath: "/qfqzApp/"
}

(2)router配置

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL, // 这个就是上面的publicPath
  routes,
});

3、vue3+vite的配置

(1)vite.config.js配置

配置

export default defineConfig({
  base: "/qfqzApp/"
})

(2)router配置

const router = createRouter({
  // 指定路由的模式,此处使用的是history模式
  history: createWebHistory("/qfqzApp/"),
  // 路由地址
  routes
});

4、发布

配置完以上三步后,

vue项目进行打包发布复制到服务器对应目录下,

nginx配置改完记得进行重启。

然后就能够正常访问二级路由了。

5.扩展

Nginx 配置中root和alias的区别分析__揽的博客-CSDN博客

目录
相关文章
|
1月前
|
编解码 应用服务中间件 Linux
centos配置nginx-rtmp实现ffmpeg转码rtsp为rtmp视频流
centos配置nginx-rtmp实现ffmpeg转码rtsp为rtmp视频流
171 1
|
1月前
|
Ubuntu 安全 应用服务中间件
详细指南:配置Nginx服务器在Ubuntu平台上
以上步骤涵盖了基本流程:从软件包管理器获取 Ngnix, 设置系统服务, 调整UFW规则, 创建并激活服务器块(也称作虚拟主机), 并进行了初步优化与加固措施。这些操作都是建立在命令行界面上,并假设用户具有必要权限(通常是root用户)来执行这些命令。每个操作都有其特定原因:例如,设置开机启动确保了即使重启后也能自动运行 Ngnix;而编辑server block则定义了如何处理进入特定域名请求等等。
199 18
|
1月前
|
Ubuntu 安全 应用服务中间件
详细指南:配置Nginx服务器在Ubuntu平台上
以上步骤涵盖了基本流程:从软件包管理器获取 Ngnix, 设置系统服务, 调整UFW规则, 创建并激活服务器块(也称作虚拟主机), 并进行了初步优化与加固措施。这些操作都是建立在命令行界面上,并假设用户具有必要权限(通常是root用户)来执行这些命令。每个操作都有其特定原因:例如,设置开机启动确保了即使重启后也能自动运行 Ngnix;而编辑server block则定义了如何处理进入特定域名请求等等。
208 17
|
2月前
|
数据建模 应用服务中间件 PHP
配置nginx容器和php容器协同工作成功,使用ip加端口的方式进行通信
本示例演示如何通过Docker挂载同一宿主目录至Nginx与PHP容器,实现PHP项目运行环境配置。需注意PHP容器中监听地址修改为0.0.0.0:9000,并调整Nginx配置中fastcgi_pass指向正确的IP与端口。同时确保Nginx容器中/var/www/html权限正确,以避免访问问题。
配置nginx容器和php容器协同工作成功,使用ip加端口的方式进行通信
|
3月前
|
应用服务中间件 网络安全 nginx
配置Nginx以支持Websocket连接的方法。
通过上述配置,Nginx将能够理解WebSocket协议的特殊要求,代理Websocket流量到合适的后端服务器。注意,Websocket并不是HTTP,尽管它最初是通过HTTP请求启动的连接升级,因此保证Nginx了解并能够妥善处理这种升级流程是关键。
702 10
|
2月前
|
Ubuntu 应用服务中间件 Linux
在Ubuntu上配置Nginx实现开机自启功能
至此,Nginx应该已经被正确地设置为开机自启。在Ubuntu中利用 `systemd`对服务进行管理是一种高效的方式,为系统管理员提供了强大的服务管理能力,包括但不限于启动、停止、重启服务,以及配置服务的开机自启动。通过这些简洁的命令,即使是对Linux不太熟悉的用户也能轻松地进行配置。
127 0
|
4月前
|
安全 应用服务中间件 网络安全
Nginx SSL/TLS协议栈中配置深度解析与实践指南-优雅草卓伊凡
Nginx SSL/TLS协议栈中配置深度解析与实践指南-优雅草卓伊凡
277 0
Nginx SSL/TLS协议栈中配置深度解析与实践指南-优雅草卓伊凡
|
7月前
|
应用服务中间件 nginx
Nginx进程配置指令详解
Nginx进程配置指令主要包括:`worker_processes`设置工作进程数;`worker_cpu_affinity`绑定CPU核心;`worker_rlimit_nofile`设置最大文件描述符数量;`worker_priority`设置进程优先级;`worker_connections`设置最大连接数;`daemon`控制守护进程模式;`master_process`启用主进程模式;`pid`设置PID文件路径;`user`指定用户和组;`error_log`配置错误日志。这些指令在`nginx.conf`中配置,用于优化和控制Nginx的运行行为。
327 10
|
缓存 运维 应用服务中间件
运维系列.Nginx配置中的高级指令和流程控制
运维系列.Nginx配置中的高级指令和流程控制
777 1
|
网络协议 应用服务中间件 nginx
Nginx的http块sendfile,keepalive_timeout的配置指令说明
Nginx的http块sendfile,keepalive_timeout的配置指令说明