https://www.cnblogs.com/zhonglinke/p/11906211.html
安装nginx的前奏
安装依赖
yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel
创建一个文件夹
cd /usr/local
mkdir nginx
cd nginx
下载Nginx tar包 和 解压
wget http://nginx.org/download/nginx-1.13.7.tar.gz
tar -xvf nginx-1.13.7.tar.gz
安装nginx
进入nginx目录
cd /usr/local/nginx/nginx-1.13.7 (当前下载的nginx的版本)
执行命令
./configure
执行安装make命令 ( 可以先查看当前是不是支持make命令 make -v )
yum -y install gcc automake autoconf libtool make
执行make install命令 安装nginx
make && make install
三、 启动nginx
进入 /usr/local/nginx/sbin/ 目录。 通过 ./nginx 启动nginx服务
四、nginx验证方法
浏览器访问如：[http:// IP：80]
如果能正常显示nginx首页，则表示安装成功，测试关闭
2.Vue项目打包
打包正式环境
npm run build:prod
打包预发布环境
npm run build:stage
- 部署时可能会发现资源路径不对 ,只需修改 vue.config.js下 文件资源路径
请根据自己路径来配置更改
publicPath: './'
- 将打包后的dist文件夹上传至服务器
scp -r dist root@ip:/usr/local/project
本次项目路径为 /usr/local/webapp/
5.修改Nginx的conf文件
vim /usr/local/nginx/cong/nginx.conf
修改如下
server {
listen 80;
server_name localhost;
注意设定 root路径是有dist的
location / {
root /usr/local/webapp/dist;
index /index.html;
}
location / {
root /usr/local/project/dist;
try_files uri/ /index.html;
index index.html index.htm;
}
location /prod-api/{
proxy_set_header Host remote_addr;
proxy_set_header REMOTE-HOST proxy_add_x_forwarded_for;
proxy_pass http://localhost:8080/;
}
}
增加如下两行到nginx.conf的http{}段， 增大nginx上传文件大小限制
设置允许发布内容为8M
client_max_body_size 100M;
client_body_buffer_size 1024k;
- 使配置生效
sbin/nginx -s reload
sbin/nginx -s stop
sbin/nginx
7.访问ip地址查看效果
