在Nginx上部署Vue项目并通过局域网访问网站

以本机虚拟机安装的CentOS7为例

一、安装Nginx(以1.18.0版本为例)

1、 下载Nginx安装包

        wget http://nginx.org/download/nginx-1.18.0.tar.gz

2、解压Nginx压缩包

        tar zxvf nginx-1.18.0.tar.gz

3、进入Nginx目录下

        cd /nginx/nginx-1.18.0

4、配置安装运行目录

        ./configure --prefix=/usr/local/nginx

5、执行编译安装

        make && make install
6、安装完毕，进入Nginx下的sbin目录并启动nginx

        cd /usr/local/nginx/sbin

        ./nginx

7、查看Nginx版本

      nginx -v

      若出现“ bash:nginx:未找到命令”，说明没有配置环境变量，配置方法如下   

       【配置Nginx环境变量】

        在/etc/profile 文件结尾中加入配置 ，命令：vim /etc/profile
        export NGINX_HOME=/usr/local/nginx
        export PATH=$PATH:$NGINX_HOME/sbin
        编译完保存退出并执行 source /etc/profile
        执行命令 nginx -v 显示nginx 版本号说明环境变量配置成功

        如果还不成功，请执行以下指令(相当于创建快捷方式)即可。

        ln  -s  /usr/local/nginx/sbin/nginx  /usr/local/bin/

         【说明】

                源文件：/usr/local/nginx/sbin/nginx

                目标路径：/usr/local/bin/

8、查看Nginx是否启动，以下为启动状态

         停止nginx的指令为:
         nginx -s quit或者nginx -s stop

 9、nginx成功启动后，在浏览器中访问本机IP及默认的80端口，可显示Nginx欢迎页面，如下

二、打包Vue项目

        Vue脚手架项目，执行npm run build，将在目录下生成一个dist的文件夹，

 将此文件夹上传至虚拟机CentOS7下，使用工具为winSCP，界面如下：

 将本机生成的dist文件夹拷贝至虚拟机路径 /data/下。

三、修改Nginx配置文件

进入到nginx所在目录，我本机为/usr/local/nginx/conf，打开nginx.conf文件，修改root指定的文件，例如我的dist文件夹放在data目录，修改完后保存，并重启nginx。

        此时，在虚拟机上已经可以访问到网页了，但是要想局域网中的机器都能访问到这个网页，还需要配置Nginx所在机器的防火墙，开启相应的端口，如下：

 开启我在Nginx中配置的9000端口。

 好了，到此，局域网中其他机器已经可以通过Nginx所在的机器IP和端口访问这个页面了

【注意：】

  如果网页路由采用了history模式，当网页路由跳转后再次刷新时会出现404网页错误，解决办法是，在Nginx配置文件中添加以下一条语句即可解决：