使用nginx在contos7上部署vue项目

Vue项目部署到centos7系统服务器

1.安装nginx并启动

1.1下载安装包

cd /usr/local (切换路径)

wget http://nginx.org/download/nginx-1.6.2.tar.gz (选择一个比较稳定的版本下载即可，或者手动下载后，用xshell传到该目录下也行)

1.2 解压安装

tar -zxvf nginx-1.6.2.tar.giz -C /usr/local (local这个目录类似于Windows的program目录，所以一些软件可以都安装在这里)

1.3 下载依赖的库文件

​ yum install pcre
​ yum install pcre-devel

 yum install zlib
 yum install zlib-devel

1.4 进行configure 配置

cd /usr/local/nginx-1.6.2 && ./configure –prefix=/usr/local/nginx

1.5 编译安装 (cd 到解压好的nginx-1.6.2，这个目录下安装编译)

make && make install

1.6 启动Nginx

​ 执行完5步骤后，cd 到/usr/local/nginx目录下。执行ls，可以看到四个目录

​ conf—-配置文件 html—-网页文件 logs—–日志文件 sbin——主要二进制程序

​ 启动命令： ./sbin/nginx (无参数) 启动 （-s stop）关闭 （-s reload）重启
1.7 查看

查看是否成功 ps -ef | grep nginx (如果能看到两个相邻ID的进程，说明启动成功)

失败的可能 80端口被占用了。 netstat -ano | grep 80

如果成功的话，浏览器访问能看到欢迎页面：（http://服务器的IP:80）

2.打包vue项目

2.1我们在项目的根路径下输入如下命令

npm run build

如下图则打包成功

项目里会多一个dist文件

2.2 把vue项目里打包好的 dist 文件 上传到 centos7服务器上

(这里需要注意的是一定要记住你存的 dist 路劲 下面配置 nginx里的conf时候需要用到)

3.配置 nginx 的conf
3.1 使用下面命令进入 nginx.conf修改

vim /usr/local/nginx/conf/nginx.conf

3.2 进入 nginx.conf 配置server

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root /home/vue_test/dist;     root  打包好的项目目录（这里就需要到2.2的存放dict的路劲）
            try_files $uri $uri/ @router;  try_files  解决vue路由页面无法访问问题
            index  index.html index.htm;   index  找index.html
        }
        location @router {    location @router 临时重定向
                rewrite ^.*$ /index.html last;
        }

(注意user也需要修改)
3.3 修改完后 重启nginx

/usr/local/nginx/sbin/nginx -s reload

3.4 在浏览器输入 http://服务器url:80

转载博客:
http://lql674470845.gitee.io/blog/post/vue%E9%A1%B9%E7%9B%AE%E9%83%A8%E7%BD%B2%E5%88%B0centos7/