【Vue 项目打包上线及 Nginx 代理】

Vue 项目打包前准备

修改代理配置

Vue 项目打包后，它本身的 devServer.proxy 代理接口会有所变化。若只是在当前电脑上运行则不需要修改。若放到 linux 系统中或者是云服务器中则需要更改。

linux 系统中端口改成: 0.0.0.0:端口号、ip 地址:端口号

配置按需导入

若使用前端框架开发，组件应该按需导入。可以减少依赖，优化页面性能。
真实项目中。建议原生开发，尽量避免使用前端框架。当然这个看项目规模，以及 money

使用命令行打包

	npm run build
	打包完成后会在当前项目中生成一个 dist 文件夹。此文件夹内的内容就是要上线部署的内容

Nginx 安装配置

原因

为什么要使用 Nginx 做代理，Tomcat 不行吗？（根据业务需求来）
1、Tomcat 默认并发量是 150，当然 Tomcat 可通过修改配置、硬件性能和 CPU 数量更改并发量。或者做集群处理。
2、Nginx 最大并发量是 65535，相比 Tomcat 集群。部署一个 Nginx 可以满足大部分需求。若还是无法满足可以考虑 Nginx 集群

Nginx 依赖库安装

	yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

安装 Nginx

	进入目录
		cd /usr/local
		
	官网地址：	http://nginx.org/en/download.html (官网有几种不同版本，下载对应的版本)
	1、官网下载
		wget http://nginx.org/download/nginx-1.23.2.tar.gz
	2、上传 Nginx 压缩包
	
	解压 nginx 安装包
		tar -zxvf nginx-1.23.2.tar.gz
	
	进入目录
		cd nginx-1.23.2
	
	检测安装平台的目标特征
		./configure
	
	编译（从 Makefile 中读取指令，后编译）
		make
	
	安装（从 Makefile 中读取指令，安装到指定的位置）
		make install
	
	在 /usr/local/nginx 目录下,可以看到如下4个目录:
		conf 配置文件
		html 网页文件
		logs 日志文件
		sbin 主要二进制程序

启动 Nginx

	/usr/local/nginx/sbin/nginx -t
	/usr/local/nginx/sbin/nginx

Nginx 代理 dist 文件夹下页面 (重要)

在 /usr/local/nginx/conf 下找到 nginx.conf 配置文件，进行配置。如下：

	server {
	       listen       80;	# 当前主机端口号，可改
	       server_name  主机地址;	# 当前主机 ip 地址
	       location / {
	           #root   html;	# 默认
	           #index  index.html index.htm;	# 默认
			root   html/dist;	# 代理配置 把 dist 文件夹上传到 /usr/local/nginx/html 目录下 ，也可以更改
			index  index.html;	# 默认打开页面  /usr/local/nginx/html/dist/index.html ,可以更改
	       }
	}

启动 Nginx

	ps -ef|grep nginx	先查看 Nginx 是否运行 
	
	若运行先停止运行或重启
		cd /usr/local/nginx/sbin/
		./nginx -s stop
		./nginx -s reload
		kill -9 端口号

	重启
		./nginx
	
	若看到页面，则上线成功