导语：本篇讲解如何使用nginx配置vue打包后的文件站点。

准备工作

• linux centos7操作系统
• ssh软件
• nginx
• node环境

nginx配置vue站点

新建文件

新建nginx配置文件，输入以下内容。

vi /etc/nginx/vhost/vue.conf

在里面输入：

server {  
  listen   8080;  # 监听端口
  server_name  localhost vue.example.org; # 访问域名  
  access_log  /var/www/vue/access.log; # 成功日志
  error_log  /var/www/vue/error.log; # 错误日志
  root /var/www/vue;
  index index.html;
  location / {
   try_files $uri $uri/ @router;
   index index.html;
  }
  location @router {
   rewrite ^.*$ /index.html last;
  }
  error_page 500 502 503 504 /50x.html;
  location = /50x.html {
   root html;
  }
}

打开8080端口

firewall-cmd --add-port=8080/tcp --permanent
firewall-cmd --reload

配置完了以后重载重启nginx。

systemctl reload nginx
systemctl restart nginx

上传文件

然后创建一个vue文件，上传文件访问地址，便可以看到输出结果。

创建目录：mkdir /var/www/vue 上传文件: scp -P 8080 dist/* root@192.168.1.123:/var/www/vue

scp命令：

scp命令用于Linux系统之间复制文件和目录。scp是 secure copy的缩写。

• -1： 强制scp命令使用协议ssh1
• -2： 强制scp命令使用协议ssh2
• -4： 强制scp命令只使用IPv4寻址
• -6： 强制scp命令只使用IPv6寻址
• -B： 使用批处理模式（传输过程中不询问传输口令或短语）
• -C： 允许压缩。（将-C标志传递给ssh，从而打开压缩功能）
• -p：保留原文件的修改时间，访问时间和访问权限。
• -q： 不显示传输进度条。
• -r： 递归复制整个目录。
• -v：详细方式显示输出。scp和ssh(1)会显示出整个过程的调试信息。这些信息用于调试连接，验证和配置问题。
• -c cipher： 以cipher将数据传输进行加密，这个选项将直接传递给ssh。
• -F ssh_config： 指定一个替代的ssh配置文件，此参数直接传递给ssh。
• -i identity_file： 从指定文件中读取传输时使用的密钥文件，此参数直接传递给ssh。
• -l limit： 限定用户所能使用的带宽，以Kbit/s为单位。
• -o ssh_option： 如果习惯于使用ssh_config(5)中的参数传递方式，
• -P port：注意是大写的P, port是指定数据传输用到的端口号
• -S program： 指定加密传输时所使用的程序。此程序必须能够理解ssh(1)的选项。

预览

在本地hosts文件增加解析记录,这里的ip就是你远程服务器的ip地址了。

192.168.1.123 vue.example.org

打开游览器，输入http://vue.example.org或者访问192.168.1.123:8080就可以看到之前编辑的站点的vue文件内容了。