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
若看到页面,则上线成功