Vue项目部署（Nginx）

Posted 2023-03-31 Star星屹程序设计

本文记录如何将做好的Vue项目部署到服务器上，需要准备：

1. linux系统的服务器或者虚拟机
2. Vue项目打包
3. nginx服务器的配置和部署

1、linux系统准备

本次使用云主机作为部署主机。

 2、Vue项目打包

切换到项目所在目录，使用 npm run build 命令完成项目打包，会生成一个dist文件夹

 编译后生成的dist文件夹：

3、Nginx服务器部署

（1） 安装编译器及依赖的库

yum -y install make zlib zlib-devel gcc gcc-c++ libtool openssl openssl-devel pcre pcre-devel

（2）下载Nginx并解压

cd /usr/local && wget http://nginx.org/download/nginx-1.21.6.tar.gz && tar zxvf nginx-1.21.6.tar.gz

（3）安装Nginx

make && make install #执行目录中的makefile文件

 （4）验证安装版本

（5）指定配置文件启动及停止操作

指定配置文件启动：

/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

停止Nginx服务：

/usr/local/nginx/sbin/nginx -s stop

（6）创建网站根目录并放入vue项目

这里在创建好网站根目录后，把第2步中打包的vue项目放到该目录下 

（7）配置Nginx服务

Nginx配置文件：/usr/local/nginx/conf/nginx.conf

在配置文件中，需要修改：

• location下的root到自己的网站根目录，在这里我设定的是 /www/html/dist
• server_name：该属性用于定义服务器的访问ip，默认是localhost就代表仅可本地访问，如果服务器有自己对应的外网ip，修改为自己的外网ip即可。（这里我对应的是云主机的ip） 

完成以上配置后，重启Nginx服务，并完善防火墙相关配置。

 

4、访问对应页面

  

nginx 部署 多个vue项目 端口代理配置问题

参考技术A 一 . 更改vue 前端项目 打包根路径

改为

由以上三中类型 运行打包命令后 把dist包 分别对应根路径的名称 重新命名

二. 把第一步拿到的三个项目压缩包 上传到远程服务 nginx 下的html文件夹下 如下：

更改 nginx.conf 配置如下

改成不同的名字“应该也行”打包后直接就是这个文件名 而不是dist
自己可以试一试没事）

(访问时最好在路径后 加个 '/')
更改配置后 重启项目即可
若在 项目运行中与后段接口 交互中出现问题可参考 https://www.jianshu.com/p/12ae939fafef