将vue项目部署在Linux的Nginx下,并设置为局域网内访问

2023-02-18,,,,

1. 下载

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

2. 解压缩

tar -zxvf linux-nginx-1.12.2.tar.gz
cd nginx-1.12.2/

3. 执行配置

./configure

4. 编译安装

make
make install

5. 启动 nginx

/usr/local/nginx/sbin/nginx
访问服务器Ip即可进入welcome to Nginx页面,说明配置成功

5. 部署vue项目

在idea中自己的vue项目下执行命令:npm run buid,生成dist文件夹,文件夹有两个文件,一个index.html和一个static文件夹,将/usr/local/nginx/html文件夹下的原有两个文件夹删除,并将dist文件夹下的两个文件复制进去。
重启Nginx,/usr/local/nginx/sbin/nginx -s reload
访问服务器ip地址即可进入到自己项目主页

6. 设置局域网内访问

复制server

server {

listen 80;

server_name localhost ;

  autoindex off;  

  location / {
index index.html index.htm index.php;
#try_files $uri $uri/ /server.php?/$uri;
try_files $uri $uri/ /index.php?$query_string;
} location ~ \.php(.*)$ {
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_split_path_info ^((?U).+\.php)(/?.+)$;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PATH_INFO $fastcgi_path_info;
fastcgi_param PATH_TRANSLATED $document_root$fastcgi_path_info;
include fastcgi_params;
}

}

并将 server_name修改为:服务器Ip地址:80(端口号)

将防火墙设置为开放80端口即可

    开启防火墙: systemctl start firewalld
    开放指定端口:firewall-cmd --zone=public --add-port=80/tcp --permanent

    命令含义: --zong #作用域

    --add-port=80/tcp #添加端口,格式为:端口/通讯协议

    --permanent #永久生效,没有此参数重启后失效
    重启防火墙:firewall-cmd --reload
    在本机浏览器输入 服务器ip:80,即可访问项目主页

将vue项目部署在Linux的Nginx下,并设置为局域网内访问的相关教程结束。

《将vue项目部署在Linux的Nginx下,并设置为局域网内访问.doc》

下载本文的Word格式文档,以方便收藏与打印。