vue前台工程部署至服务器

一、linux 服务器 安装 nginx

1. 从 nginx 官网 下载一个nginx的安装压缩包，上传至服务器，可使用 rz -be 命令

2. 将 nginx 压缩包解压至某个目录下，cd 进入其中，可看到一个可执行文件 configure，用 ./configure --prefix=“nginx的自定义安装路径（绝对路径，可进入目录中之后，用 pwd 命令查看）”&&make&&make install命令安装 nginx

3. 安装完成后，进入 nginx 的安装目录，进入 其中的 sbin 目录，可看到 可执行的 nginx 文件，执行 ./nginx 命令启动 nginx 即可

4. 打开浏览器，输入 IP ：端口 访问，若出现 下图所示，即为安装成功。

注：若启动 nginx 时报错： nginx: [emerg] bind() to 0.0.0.0:80 failed (13: Permission denied)；则是因为 nginx 的默认端口为 80，需要 管理员权限，可进入nginx的配置文件（一般在 安装目录下的 conf 目录中，nginx.conf 文件），修改 端口为 8080（大于 1024 即可）

二、上传前台工程至服务器

1. 首先在本地 使用 npm run build 命令将前台工程打包编译成 dist 文件夹

2. 在本地将 dist 文件夹 打成 tar 包

3. 上传至 服务器的 前台工程目录下（可使用 rz -be 命令）

4. 使用 tar -xvf dist.tar（tar包名称） 解压 前台的 tar 包至 该目录下，会生成一个 dist 文件夹，里面就是编译好的 前台工程

5. 配置 nginx 配置文件（nginx 安装目录下的 conf 目录中，nginx.conf 文件）

   server {
           listen       8080;
           server_name  localhost;
   
           #charset koi8-r;
   
           #access_log  logs/host.access.log  main;
   
           location /{
       		# root 配置 前台的 index.html 文件的目录地址
   			root /home/sale/saleWeb/dictWeb/dist; 
       		# 配合 下面 location @router 配置，解决缺少页面时访问报错的问题
   			try_files $uri $uri/ @router;
   		}
   		location @router{
   			rewrite ^.*$ /index.html last;
   		}
   }
   

6. 配置完成后，进入 nginx 的安装目录，进入 sbin 文件夹，重启 nginx 即可（ nignx -s reload ）

7. 打开浏览器，输入 IP ：端口 访问，即可 看到 前台工程的首页 （或 其他默认打开页面）

vue前台工程部署至服务器

原文：https://www.cnblogs.com/upward-lalala/p/14901112.html