Nginx部署vue站点

Mark in HangZhou

2019-07-14

导语：本篇讲解如何使用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;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 打开8080端口

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

1
2

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

systemctl reload nginx
systemctl restart nginx

1
2

# 上传文件

然后创建一个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文件内容了。

本文永久链接是：Nginx部署vue站点

如需转载，请注明《Nginx部署vue站点》转自，原作者Mark