nginx部署多个vue项目的方法示例


Posted in Javascript onSeptember 06, 2020

上一篇已经介绍了然后配置web项目;今天由于公司需求,需要在同一域名端口下,部署两个项目;今天花了一上午终于弄好了,选择赶紧做一个笔记。

如何连接阿里云服务器就不在这里说了,请看我以前的文章。

首先需要的效果

http://47.97.244.83/login
http://47.97.244.83/student/login

文件目录

nginx部署多个vue项目的方法示例

两个项目并列在同一文件夹内。

准备好两个vue的项目

http://47.97.244.83/login:这个不用修改配置直接build就可以。关键是二级域名的vue项目,需要进行一下修改。

首先在config文件夹内的index.js内修改(注意是build内)

// nginx 配置
 assetsPublicPath: '/student/',

nginx部署多个vue项目的方法示例

这样确保生产出来的文件,在index.html中都是在student下。

nginx部署多个vue项目的方法示例

index.html文件修改

添加 <meta base=/student/ >

最后build的index.html文件如下:

<!DOCTYPE html>
<html>
<head>
	<meta base=/student/ >
	<meta charset=utf-8>
	<meta http-equiv=X-UA-Compatible content="IE=edge">
	<meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=./favicon.ico>
	<title>砺行教育管理系统</title>
	<link href=/student/static/css/app.26c5efbf7403094b0b351615f215dca8.css rel=stylesheet>
</head>
<body>
	<noscript><strong>对比起程序报错了</strong></noscript>
	<div id=app></div>
	<script type=text/javascript src=/student/static/js/manifest.c07ff685ddc74bf39577.js></script>
	<script type=text/javascript src=/student/static/js/vendor.63945df20397482ff39e.js></script>
	<script type=text/javascript src=/student/static/js/app.39f0baab8f580b8d4bc2.js></script>
</body>
</html>

在src/router/index.js文件修改
添加 base: ‘/student/',

nginx部署多个vue项目的方法示例

Nginx配置修改

server {
  listen  80;
  server_name localhost;
		# root /usr/local/sixiucheng/codes;
  location / {
   root /usr/local/sixiucheng/codes/dist;
   
	 try_files $uri $uri/ @router;
   index index.html index.htm;
  }

		location /student { 
		alias /usr/local/sixiucheng/codes/student/;
	 try_files $uri $uri/ /student/index.html;
   index index.html index.htm;
  }
  location @router {
   rewrite ^.*$ /index.html last;
  }
  error_page 500 502 503 504 /50x.html;
  location = /50x.html {
   root html;
  }
 }

注意这里的root

nginx部署多个vue项目的方法示例

一个是全局的一个单个引入,这里需要注意一下当注释掉全局的root时候,需要在二级配置下将root改为alias;如下图

nginx部署多个vue项目的方法示例

所以此时的配置为

nginx部署多个vue项目的方法示例

最后一定要注意重启!!!

nginx -s reload

注意:如果80端口失败

1.检查下nginx配置,使用nginx -t 看看有无错误信息
2.检查本地防火墙是否开启80
3.如果是云主机,检查安全组是否开放80权限。

题外话

01…刚开始将alias写成root,导致html页面中的css和js一直404;后来百度到加下面一句话,就可以解决问题;但是这样会将所有的js,css引入的位置修改。这里注意一下。

# 解决css,js引入失败
		 location ~ .*\.(jpg|jpeg|gif|png|ico|css|js|pdf|txt)$ 
		 		{
		 			root /usr/local/sixiucheng/codes;
		 			proxy_temp_path /usr/local/sixiucheng/codes;
		 		}

02…网上还有alias的路径指向,root和alias的区别在于(个人理解,出错希望点出):

location /file/{
alias /var/html/file; #这个查找文件的路径直接是/var/html/file
}
location /file/{
root /var/html/file; #这个查找文件的路径应该是/var/html/file/file
}

到此这篇关于nginx部署多个vue项目的方法示例的文章就介绍到这了,更多相关nginx部署多个vue项目内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Javascript String.replace的妙用
Sep 08 Javascript
jQuery实战之品牌展示列表效果
Apr 10 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
JS自定义函数实现时间戳转换成date的方法示例
Aug 27 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 Javascript
微信小程序云开发之使用云存储
May 17 Javascript
Openlayers实现距离面积测量
Sep 28 Javascript
js实现简单的无缝轮播效果
Sep 05 #Javascript
JS+CSS实现炫酷光感效果
Sep 05 #Javascript
js实现炫酷光感效果
Sep 05 #Javascript
js实现搜索提示框效果
Sep 05 #Javascript
jQuery实现简单三级联动效果
Sep 05 #jQuery
javascript canvas实现简易时钟例子
Sep 05 #Javascript
vue中使用vue-pdf的方法详解
Sep 05 #Javascript
You might like
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
PHP容易忘记的知识点分享
2013/04/30 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
YII路径的用法总结
2014/07/09 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
学习ExtJS accordion布局
2009/10/08 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
js 事件的传播机制(实例讲解)
2017/07/20 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
示例vue 的keep-alive缓存功能的实现
2018/12/13 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
python创建文件备份的脚本
2018/09/11 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
python调用win32接口进行截图的示例
2020/11/11 Python
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
大学旷课检讨书
2014/01/28 职场文书
车间主任岗位职责
2014/03/16 职场文书
《北京的春节》教学反思
2014/04/07 职场文书
职位说明书范文
2014/05/07 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书
PyQt5实现多张图片显示并滚动
2021/06/11 Python