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 相关文章推荐
jquery ui dialog里调用datepicker的问题
Aug 06 Javascript
javascript实现避免页面按钮重复提交
Jan 08 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
JavaScript 数组- Array的方法总结(推荐)
Jul 21 Javascript
ECMAScript6--解构
Mar 30 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
Angular8基础应用之表单及其验证
Aug 11 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 Javascript
Vue Object 的变化侦测实现代码
Apr 15 Javascript
JS实现密码框效果
Sep 10 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
对盗链说再见...
2006/10/09 PHP
php简单分页类实现方法
2015/02/26 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
php实现的日历程序
2015/06/18 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
Python基础教程之tcp socket编程详解及简单实例
2017/02/23 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
TensorFlow变量管理详解
2018/03/10 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
python opencv进行图像拼接
2020/03/27 Python
PyCharm 在Windows的有用快捷键详解
2020/04/07 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
苹果香港官方商城:Apple香港
2016/09/14 全球购物
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
Java软件工程师综合面试题笔试题
2013/09/08 面试题
大课间活动制度
2014/01/18 职场文书
爷爷追悼会答谢词
2014/01/24 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
公司内部升职自荐信
2015/03/27 职场文书
一篇文章学会Vue中间件管道
2021/06/20 Vue.js