Nginx部署多个vue前端项目
前言:在前端项目的部署上需要让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前端项目的更多相关文章
- 基于vue+springboot+docker网站搭建【五】部署vue前端项目
部署vue前端项目 一.下载项目到本地 https://github.com/macrozheng/mall-admin-web 二.npm install 三.修改api配置,改为你接下来要部 ...
- vue前端项目优化策略
vue前端项目有什么优化策略? .生成打包报告.(可以发现一些问题,并进行解决)2.使用第三方库启用CDN加载3.使用Element-ui的话,按需加载组件4.使用路由懒加载 生成打包报告: .生成打 ...
- VUE前端项目配置代理解决跨域问题
VUE前端项目配置代理解决跨域问题 问题如下,经常在本地调试接口出现这种问题 解决方式1:Chrome 的扩展插件 以前使用Chrome 的扩展插件,但是有时候还是会出现莫名其妙的问题. 需要梯子才行 ...
- VUE 前端项目优化方法
前端项目通过webpack打包会生成app.js和vendor.js,如果第三方组件依赖过多,会造成打包后的vendor.js过大,页面首次加载的时候会出现白屏时间过长,影响用户体验.对此,我们需要通 ...
- 让现有vue前端项目快速支持多语言 - 用.net core程序快速替换中文为资源Key,咱不干体力活
前言 最近应公司上层要求,需要将现有项目尽快支持多语言,而中文内容可以找专业人员翻译.那么咱们说干就干,首先我们项目的前端是用vue写的spa程序且组件方面用的element ui,那么自然而然想到用 ...
- vue前端项目初始化的步骤
前端项目初始化的步骤 1. 安装vue脚手架 2.通过vue脚手架创建项目 可以直接 vue create 项目名 也可以 vue ui 3.配置vue路由 4.配置Element-ui 组件 ...
- 在Vue前端项目中,附件展示的自定义组件开发
在Vue前端界面中,自定义组件很重要,也很方便,我们一般是把一些通用的界面模块进行拆分,创建自己的自定义组件,这样操作可以大大降低页面的代码量,以及提高功能模块的开发效率,本篇随笔继续介绍在Vue&a ...
- 【vue】创建一个vue前端项目,编译,发布
npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包. vue-cli: 用户生成Vue工 ...
- nginx下配置vue前端项目
server { listen 80; server_name _; root /opt/h5/index/; location / { index index.html index.htm inde ...
- docker-compose + nginx部署前后端分离的项目
安装docker 安装必要的系统工具 # 更新yum工具 yum update -y # 安装必要的工具 yum install -y yum-utils device-mapper-persiste ...
随机推荐
- python中的字符串/列表查找函数小总结
find()和index() 首先是适用情况, 'list' object has no attribute 'find' , list没有find方法, str全有. 返回的情况: 查找成功都会返回 ...
- cenos7配置epel源
1.首先进入/etc/yum.repos.d/目录下,新建一个repo_bak目录,用于保存系统中原来的repo文件 [root@bogon ~]# cd /etc/yum.repos.d/ [roo ...
- pytest用例管理框架实战(基础篇)
先安装pip install pytest pytest用例管理框架 默认规则: 1.py文件必须以test_开头或者_test结尾 2.类名必须以test开头 3.测试用例必须以test_开头 ge ...
- 痞子衡嵌入式:MCUXpresso IDE下生成镜像文件的方法及其与IAR,MDK差异
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是MCUXpresso IDE下生成镜像文件的方法及其与IAR,MDK差异. 痞子衡很久以前写过一篇文章 <ARM Cortex-M ...
- DecimalFormat--控制输出格式
DecimalFormat的相关应用 整数的实现: 小数的实现: 科学计数法: 分组分隔符: 举个例子吧!-- 关于前缀后缀: 本地化货币符号: 引用特殊的字符,作为前缀或者后缀: 实例来袭! 1.0 ...
- 为什么 C# 可能是最好的第一编程语言
纵观神州大地,漫游中华互联网,我看到很多人关注为什么你应该开始学习JavaScript做前端,而对blazor这样的面向未来的框架有种莫名的瞧不起,或者为什么你应该学习Python作为你的第一门编程语 ...
- HTTP 返回状态码403,404,502等不同报错原因及解决思路
要学会看日志rpm的默认路径 /var/log/nginx/源码的默认路径 安装路径/logs/ 排错思路: 1)服务器启动失败,直接"nginx -t"测试语法 看配置文件是 ...
- CosineWarmup理论与代码实战
摘要:CosineWarmup是一种非常实用的训练策略,本次教程将带领大家实现该训练策略.教程将从理论和代码实战两个方面进行. 本文分享自华为云社区<CosineWarmup理论介绍与代码实战& ...
- 页面div垂直内容超出后,edge浏览器右侧没有自动出现滚动条
搜索网上解决办法,是给父元素添加样式 overflow-y:scroll; height:100vh; 但此举只是给该父元素侧边添加滚动条,而且不好配合回到顶部这一效果 最后发现是在父组件的包裹元素中 ...
- 2020寒假学习笔记14------Python基础语法学习(三)
今天学习了Python的基础语法,其中学的内容有: 比较运算符.逻辑运算符.同一运算符.整数缓存问题.基本运算符.复合复制运算符.运算符优先级问题.字符串基本特点.字符串的编码.空字符串和len()函 ...