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博客

目录
相关文章
|
18天前
|
运维 前端开发 应用服务中间件
LNMP详解(八)——Nginx动静分离实战配置
LNMP详解(八)——Nginx动静分离实战配置
23 0
|
28天前
|
应用服务中间件 nginx
Nginx中如何配置中文域名?
Nginx中如何配置中文域名?
38 0
|
16天前
|
前端开发 应用服务中间件 nginx
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
78 0
|
11天前
|
JavaScript 开发者
Vite和Webpack的区别是什么
Vite和Webpack的区别是什么
|
11天前
|
应用服务中间件 网络安全 nginx
nginx配置https访问
nginx配置https访问
24 0
|
21天前
|
应用服务中间件 nginx
nginx配置https和直接访问静态文件的方式
nginx配置https和直接访问静态文件的方式
27 3
|
26天前
|
数据可视化 应用服务中间件 网络安全
简单易用的Nginx代理管理工具:体验便捷配置、高效管理
Nginx Proxy Manager是一款强大的代理服务器管理工具,提供简单直观的界面来配置和管理Nginx代理服务器,帮助用户轻松提升配置的简洁性和便捷性。
44 0
简单易用的Nginx代理管理工具:体验便捷配置、高效管理
|
28天前
|
前端开发 应用服务中间件 nginx
nginx中配置不输入端口(指定地址)访问项目的方法
nginx中配置不输入端口(指定地址)访问项目的方法
23 0
|
30天前
|
NoSQL 关系型数据库 MySQL
Docker安装详细步骤及相关环境安装配置(mysql、jdk、redis、自己的私有仓库Gitlab 、C和C++环境以及Nginx服务代理)
Docker安装详细步骤及相关环境安装配置(mysql、jdk、redis、自己的私有仓库Gitlab 、C和C++环境以及Nginx服务代理)
187 0
|
1月前
|
应用服务中间件 nginx Windows
windows下快速安装nginx 并配置开机自启动
windows下快速安装nginx 并配置开机自启动
windows下快速安装nginx 并配置开机自启动

热门文章

最新文章