前言：在前端项目的部署上需要让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. k8s中的kubeclt命令

    一.kubectl 基本命令 1.陈述式资源管理方法: 1.kubernetes集群管理集群资源的唯一入口是通过相应的方法调用apiserver的接口 2.kubectl 是官方的CLI命令行工具,用 ...

  2. Jmeter读取Csv文件，字段中有逗号分隔，读取不成功

    Jmeter读取Csv文件,字段中有逗号分隔,读取不成功

  3. MySQL count(*) 和 count(字段) 区别

    count(字段)不会取Null的 select count(*) from test01                7条 select count(0) from test01          ...

  4. Linux高并发服务器之Linux多线程开发

    本文源自C++高薪面试项目的学习笔记,主要记录Liunx多线程的学习,主要知识点是线程概述等基础概念以外,还有线程相关Liunx系统函数以及对应练手代码,除此之外还有线程同步问题的讲解以及实战多线程买 ...

  5. 面向对象分析与设计（V3）第一章：复杂性

    书名(中):面向对象分析与设计 书名(英):Object-Oriented Analysis and Design with Applications 作者:Grady Booch等 第一部分.概念 ...

  6. Vditor在原生JS中如何结合后端使用

    目录 1.Vditor介绍 2.如何在原生JS中结合后端使用 2.1 背景 2.2 正确使用方式 2.2.1 编辑页面 2.2.2 回显页面(修改页面) 2.2.3 预览页面 3.小结一下 1.Vdi ...

  7. 设计师必备：免费素材管理工具Billfish v3.0更新了！

    ​​Billfish是专门为设计师打造的图片收藏管理工具,可以轻松管理您的各种素材文件.Billfish是一个免费的软件,支持对大量的图片素材进行管理,提供多种快速的检索筛选功能,如颜色,格式,方向, ...

  8. springboot--配置格式文件

    修改端口号的三种方法 1.server.port = 80 2.新建application.yml文件. 3.新建application.yaml文件. 配置文件加载顺序: 当三个文件都存在时prop ...

  9. 《操作系统导论》读书笔记1——CPU虚拟化，进程

    系列文章目录和关于我 一丶CPU的虚拟化 一个桃子,我们称之为物理(physical)桃子.但有很多想吃这个桃子的 人,我们希望向每个想吃的人提供一个属于他的桃子,这样才能皆大欢喜.我们把给每个 人的 ...

  10. Mysql 备份方案

    一.为什么要备份 [1]容灾恢复:硬件故障.不经意的 Bug 导致数据损坏,或者服务器及其数据由于某些原因不可获取或无法使用等(例如:机房大楼烧毁,恶意的黑客攻击或 Mysql 的 Bug 等).[2 ...