Vue项目部署_vue openssl-优快云博客

本文链接：https://blog.youkuaiyun.com/demo34/article/details/125743615

本文详细介绍了Vue项目从准备配置环境到本地打包，再到使用Nginx进行服务器部署的完整流程，包括安装Nginx，打包Vue CLI项目，创建服务器项目路径，解压上传的dist文件，以及配置和重启Nginx服务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、准备配置环境

二、本地项目打包

三、项目部署

一、准备配置环境

安装依赖包

apt-get install gcc
apt-get install libpcre3 libpcre3-dev
apt-get install zlib1g zlib1g-dev
# Ubuntu14.04的仓库中没有发现openssl-dev，由下面openssl和libssl-dev替代
#apt-get install openssl openssl-dev
sudo apt-get install openssl 
sudo apt-get install libssl-dev

安装nginx

cd /usr/local
mkdir nginx
cd nginx
wget http://nginx.org/download/nginx-1.13.7.tar.gz
tar -xvf nginx-1.13.7.tar.gz

编译nginx

# 进入nginx目录
/usr/local/nginx/nginx-1.13.7
# 执行命令
./configure
# 执行make命令
make
# 执行make install命令
make install

启动nginx

#进入nginx启动目录
cd /usr/local/nginx/sbin
# 启动nginx
./nginx

注：

如果重启服务器/usr/local/nginx/logs目录下缺少 nginx.pid

在配置文件中取消/pid logs/nginx.pid;/的注解

在/usr/local/nginx/ [root@localhost nginx]/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.con

二、本地项目打包

打包Vue Cli

 npm run build

压缩dist文件上传

三、项目部署

新建项目路径文件夹/home/ubuntu/server
在服务器中下载unrar的工具

sudo apt-get install unrar

解压上传的dist.rar /home/ubuntu/server并解压

unrar x dist.rar

```
修改配置文件(参考) 
```

root@VM-4-15-ubuntu:/usr/local/nginx# sudo nano ./conf/nginx.conf

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

        location / {
            root   /home/ubuntu/server/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;                
        }
	location /api/ {
	   proxy_pass http://localhost:9090/;
	   proxy_cookie_path / /api;
           proxy_redirect default;
           rewrite ^/api/(.*) /$1 break;
           client_max_body_size 500m;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}