首页 > 系统相关 >Nginx——一个域名下部署多个Vue项目

Nginx——一个域名下部署多个Vue项目

时间:2024-07-10 11:41:12浏览次数:16  
标签:Vue const nginx screen Nginx 域名 vue publicPath

前言

当前生成环境已经有一个正常的Vue项目,现在需要将大屏项目也部署到同一个域名下,搜索了下类型的问题,感觉问的还挺多的,所以这里记录下操作步骤;
如何在不动第一个项目的情况下来部署第二个Vue项目;

内容

前端配置

publicPath

修改vue.config.js下的publicPath参数

 publicPath: process.env.NODE_ENV === 'production' ? '/screen/' : '/',

完整配置如下:

const { defineConfig } = require('@vue/cli-service');
const path = require('path');
const resolve = (dir) => {
    return path.join(__dirname, dir);
};
module.exports = defineConfig({
    transpileDependencies: true,
    publicPath: process.env.NODE_ENV === 'production' ? '/screen/' : '/',
    filenameHashing: true,
    productionSourceMap: false,
    chainWebpack: (config) => {
        config.resolve.alias.set('@', resolve('src'));
        config.plugin('html').tap((args) => {
            args[0].title = 'xxx营销一体化数字管理平台';
            return args;
        });
    },
});

router

修改路由,配置如下:

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        name: 'index',
        component: () => import('@/views/index.vue'),
    },
];
const router = new VueRouter({
    mode: 'history',
    base: 'screen', // 基础路径进行调整
    routes,
});

export default router;

服务器配置

创建目录

进入到第一个项目的目录下,创建子级目录,并将制品 dist放入到该目录下;
不想放到第一项目目录下,新建一个目录也可以,不过记得对应的nginx配置也需要调整;

$ cd <第一个项目目录下>
$ mkdir screen

Nginx

在第一个项目对应的配置文件中,增加对应的配置:

 location ^~ /screen {
               alias  /www/wwwroot/tiktok-web/screen/dist;
               try_files $uri $uri/ /screen/index.html;
        }

检测无误后,重新载入nginx配置文件:

$ nginx -t
$ nginx -s reload

测试验证

访问对应的地址(http://<域名>/screen/)进行测试:

总结

  1. 前端publicPathrouter进行调整
  2. 服务端nginx进行配置
  3. 进行访问验证

我丢,忘记对关键数据看板哪里进行了缺省的配置,现在要去修复这个问题了

标签:Vue,const,nginx,screen,Nginx,域名,vue,publicPath
From: https://www.cnblogs.com/wangyang0210/p/18293739

相关文章

  • 小谈nginx
    Nginx查看并发方案一:Web页面查看 1:查看安装的nginx启用了--with-http_stub_status_module模块   nginx-V2:按照下图配置 vim/etc/nginx/nginx.conf server{ stub_statuson; 3:保存并从新载入nginx配置文件   nginx-t     nginx-sreload4:......
  • 毕业设计-基于Springboot+Vue的家政服务管理平台的设计与实现(源码+LW+包运行)
    源码获取:https://download.csdn.net/download/u011832806/89456882基于SpringBoot+Vue的家政服务管理平台开发语言:Java数据库:MySQL技术:SpringBoot+MyBatis+Vue.js工具:IDEA/Ecilpse、Navicat、Maven系统演示视频:链接:https://pan.baidu.com/s/1gssA8jncDvvFfo8NSHDh8g?pw......
  • 毕业设计-基于Springboot+Vue的社区医院管理服务系统的设计与实现(源码+LW+包运行)
    源码获取:https://download.csdn.net/download/u011832806/89456872基于SpringBoot+Vue的社区医院管理服务系统开发语言:Java数据库:MySQL技术:SpringBoot+MyBatis+Vue.js工具:IDEA/Ecilpse、Navicat、Maven系统演示视频:链接:https://pan.baidu.com/s/14Zrh0wu8QdSeEJof1uyc0......
  • vue 点击图片方法
    一般项目中需要点击触发事件才进行查看大图,elementUi组件库中并没有写触发需要执行的代码,这里在触发的方法中加this.$refs.preview.clickHandler()触发查看大图功能<el-uploadclass="avatar-uploader"accept=".jpg,.jpeg,.png"name="image":action="uploadI......
  • Nginx 高性能架构解析
    本文详细探讨了Nginx的反向代理、负载均衡和性能优化技术,包括配置优化、系统优化、缓存机制和高并发处理策略,旨在帮助专业从业者深入理解并有效应用Nginx。关注TechLead,复旦博士,分享云服务领域全维度开发技术。拥有10+年互联网服务架构、AI产品研发经验、团队管理经验,复旦机器......
  • 基于java+springboot+vue实现的音乐网站(文末源码+Lw)102
     功能介绍:本音乐网站管理员功能有个人中心,用户管理,歌曲分类管理,歌曲信息管理,管理员管理,系统管理等。用户可以注册登录,试听歌曲,可以下载歌曲。因而具有一定的实用性。本站是一个B/S模式系统,采用SpringBoot框架,MYSQL数据库设计开发,充分保证系统的稳定性。系统具有界面清晰、......
  • 基于java+springboot+vue实现的校园社团管理平台(文末源码+Lw)101
     本校园社团信息管理系统功能有个人中心,学生管理,社长管理,社团分类管理,社团信息管理,加入社团管理,社团成员管理,社团活动管理,活动报名管理,系统管理等。社长添加社团,管理员审核社团,学生加入社团,社长审核社团。因而具有一定的实用性。本站是一个B/S模式系统,采用SpringBoot框架,MY......
  • 基于springboot+vue实现的大型商场应急预案管理系统(文末源码+Lw)099
    本大型商场应急预案管理系统管理员功能有个人中心,员工管理,预案信息管理,预案类型管理,事件类型管理,预案类型统计管理,事件类型统计管理,应急预案管理。员工可以查看各种预案信息。因而具有一定的实用性。本站是一个B/S模式系统,采用SpringBoot框架,MYSQL数据库设计开发,充分保证系......
  • 基于java+springboot+vue实现的音乐网站(文末源码+Lw)102
     功能介绍:本音乐网站管理员功能有个人中心,用户管理,歌曲分类管理,歌曲信息管理,管理员管理,系统管理等。用户可以注册登录,试听歌曲,可以下载歌曲。因而具有一定的实用性。本站是一个B/S模式系统,采用SpringBoot框架,MYSQL数据库设计开发,充分保证系统的稳定性。系统具有界面清晰、......
  • 基于java+springboot+vue实现的校园社团管理平台(文末源码+Lw)101
     本校园社团信息管理系统功能有个人中心,学生管理,社长管理,社团分类管理,社团信息管理,加入社团管理,社团成员管理,社团活动管理,活动报名管理,系统管理等。社长添加社团,管理员审核社团,学生加入社团,社长审核社团。因而具有一定的实用性。本站是一个B/S模式系统,采用SpringBoot框架,MY......