前言:在前端项目的部署上需要让2个前端项目都部署到一个IP地址和端口下,那么我们这里就要用到Nginx了,接下来我们看看如何在一个Nginx下部署2个前端项目。

例如我的服务器地址是

http://1.116.33.31/

那么则是访问的pc项目首页,则是访问的app项目首页

一,首先打包编译两个前端项目(base基础路径)

pc项目base默认不写,也就是 1.116.33.31/

app项目base:'/app/',也就是http://1.116.33.31/app/

二,把打包生成的静态文件上传到Linux服务器的指定目录

我这里两个文件的路径是,分别将打包文件放进文件夹内

三,配置Nginx.conf文件

四,重启Nginx服务

Nginx部署多个vue前端项目的更多相关文章

  1. 基于vue+springboot+docker网站搭建【五】部署vue前端项目

    部署vue前端项目  一.下载项目到本地   https://github.com/macrozheng/mall-admin-web 二.npm install 三.修改api配置,改为你接下来要部 ...

  2. vue前端项目优化策略

    vue前端项目有什么优化策略? .生成打包报告.(可以发现一些问题,并进行解决)2.使用第三方库启用CDN加载3.使用Element-ui的话,按需加载组件4.使用路由懒加载 生成打包报告: .生成打 ...

  3. VUE前端项目配置代理解决跨域问题

    VUE前端项目配置代理解决跨域问题 问题如下,经常在本地调试接口出现这种问题 解决方式1:Chrome 的扩展插件 以前使用Chrome 的扩展插件,但是有时候还是会出现莫名其妙的问题. 需要梯子才行 ...

  4. VUE 前端项目优化方法

    前端项目通过webpack打包会生成app.js和vendor.js,如果第三方组件依赖过多,会造成打包后的vendor.js过大,页面首次加载的时候会出现白屏时间过长,影响用户体验.对此,我们需要通 ...

  5. 让现有vue前端项目快速支持多语言 - 用.net core程序快速替换中文为资源Key,咱不干体力活

    前言 最近应公司上层要求,需要将现有项目尽快支持多语言,而中文内容可以找专业人员翻译.那么咱们说干就干,首先我们项目的前端是用vue写的spa程序且组件方面用的element ui,那么自然而然想到用 ...

  6. vue前端项目初始化的步骤

    前端项目初始化的步骤 1. 安装vue脚手架 2.通过vue脚手架创建项目 可以直接    vue create  项目名 也可以 vue ui 3.配置vue路由 4.配置Element-ui 组件 ...

  7. 在Vue前端项目中,附件展示的自定义组件开发

    在Vue前端界面中,自定义组件很重要,也很方便,我们一般是把一些通用的界面模块进行拆分,创建自己的自定义组件,这样操作可以大大降低页面的代码量,以及提高功能模块的开发效率,本篇随笔继续介绍在Vue&a ...

  8. 【vue】创建一个vue前端项目,编译,发布

    npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包. vue-cli: 用户生成Vue工 ...

  9. nginx下配置vue前端项目

    server { listen 80; server_name _; root /opt/h5/index/; location / { index index.html index.htm inde ...

  10. docker-compose + nginx部署前后端分离的项目

    安装docker 安装必要的系统工具 # 更新yum工具 yum update -y # 安装必要的工具 yum install -y yum-utils device-mapper-persiste ...

随机推荐

  1. Windows下Zookeeper安装使用

    Windows下Zookeeper安装使用 ZooKeeper是一种分布式协调服务,用于管理大型主机. 在分布式环境中协调和管理服务是一个复杂的过程. ZooKeeper通过其简单的架构和API解决了 ...

  2. OpenJudge2811:熄灯问题(枚举)

    熄灯问题 有一个由按钮组成的矩阵,其中每行有6个按钮,共5行.每个按钮的位置上有一盏灯.当按下一个按钮后,该按钮以及周围位置(上边.下边.左边.右边)的灯都会改变一次.即,如果灯原来是点亮的,就会被熄 ...

  3. 文本的格式化标签(粗体,斜体)和 <div>和<span>标签(都是双标签)

    上一个笔记有提到各种型号的标题,为了保证文章的美观,又会有除了标题之外的东西,比如粗体,斜体,下划线,删除线和各种分隔 1加粗,<strong><strong/>或者<b ...

  4. ElasticSearch 实现分词全文检索 - id、ids、prefix、fuzzy、wildcard、range、regexp 查询

    目录 ElasticSearch 实现分词全文检索 - 概述 ElasticSearch 实现分词全文检索 - ES.Kibana.IK安装 ElasticSearch 实现分词全文检索 - Rest ...

  5. Redis使用ZSET实现消息队列使用总结一

    转载请注明出处: 目录 1.zset为什么可以做消息队列 2.zset实现消息队列的步骤 3.使用jedis实现消息队列示例 4.+inf与-inf 5.redis使用list与zset做消息队列有什 ...

  6. 声网 X 在线自习室 同学陪伴、老师监督的在线自习是如何火出圈的?

    实时互联网像触角一样,通过情景的共享延伸开来,链接着我们彼此的线下.线上生活,形成一张不可分割的网络.随着社交直播.在线教育.视频会议成为大众生活不可或缺的一部分的同时,智能手表.智能作业灯.视频双录 ...

  7. 基于Vue 使用threejs导入gltf动画模型

    被老师要求学习这个完全不懂的领域的知识,代码东拼西凑终于搞定了,可能写的不好,但这方面的教程很少 某CS**平台的教程都是互相抄,看着烦死. <template> <div id=& ...

  8. 雪花算法 SnowFlake 内部结构【分布式ID生成策略】

    更多内容,前往IT-BLOG 一.前言   如何在分布式集群中生产全局唯一的 ID?[方案一]UUID:UUID是通用唯一识别码 (Universally Unique Identifier),在其他 ...

  9. Solon Initializr v1.2 发布

    Solon Initializr 是 Solon 框架的模板生成器项目.本期更新增加了快捷组合包的依赖选择,并生成对应的项目模板. 更新说明 增加 Solon Lib 依赖选择,并生成对应项目 增加 ...

  10. 解决el-checked-group中v-medel绑定的是一个数组对象方法(不用修改源码)

    思路:弃用el-checked-group使用el-checked模拟 <!DOCTYPE html> <html> <head> <meta charset ...