vue项目如何部署到nginx服务器

最新推荐文章于 2024-03-01 15:58:15 发布

置顶 star@星空

最新推荐文章于 2024-03-01 15:58:15 发布

阅读量3.1w

点赞数 9

分类专栏： nginx

本文链接：https://blog.csdn.net/weixin_43638968/article/details/109636044

版权

nginx 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

1.windows下安装nginx请看:Windows下安装Nginx

2.配置完成后，如何设置，nginx开启gzip压缩，请看vue-cli4打包最强优化（10M变300kb）

mac下安装nginx

安装工具：

homebrew（还没用过的小伙伴可以点链接进行了解或者自行百度）

步骤：
1、打开终端，习惯性命令：更新

brew update

2、终端继续执行命令：

brew search nginx   //查询要安装的软件是否存在

3、这里我们多执行一步“废”命令，不过有利于我们后面的配置：

brew info nginx

在这里插入图片描述
我们可以看到，nginx在本地还未安装（Not installed），nginx的来源（From），Docroot默认为/usr/local/var/www，在/usr/local/etc/nginx/nginx.conf配置文件中默认端口被配置为8080从而使nginx运行时不需要加sudo，nginx将在/usr/local/etc/nginx/servers/目录中加载所有文件，以及我们可以通过最简单的命令 ‘nginx’来启动nginx。

4、正式开始安装：

brew install nginx

在这里插入图片描述
5、查看nginx安装目录（是否如info所说）：

open /usr/local/etc/nginx/

在这里插入图片描述
成功打开nginx目录，也可以看到如info所说servers目录以及nginx.conf的配置文件（后面会用到这个配置文件）。但我们并没有找到nginx被安装到了哪里。

终端继续执行：

open /usr/local/Cellar/nginx  //其实这个才是nginx被安装到的目录

在这里插入图片描述
　　会看到一个以当前安装的nginx的版本号为名称的文件夹，这个就是我们安装的nginx根目录啦。进入1.12.2_1/bin目录，会看到nginx的可执行启动文件。

同样的，我们在1.12.2_1/目录下还可以看到一个名字为html的快捷方式文件夹（暂且就这么叫吧），进入该目录我们会发现其实它指向的就是/usr/local/var/www目录，这个在上面我们查看的info信息中有提到（Dcroot）
6、启动nginx，终端输入如下命令：

nginx

没有报错即为启动成功。
7、访问验证：

打开浏览器访问localhost:8080,这里跟网上的一些教程会有些不一样，正常情况下到这一步就会能看到nginx的欢迎界面啦。
在这里插入图片描述
nginx的配置（nginx.conf）:

cat /usr/local/etc/nginx/nginx.conf

显示配置文件的代码为：

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {　　　　 #侦听8080端口
        listen       8080;　　　　 #定义使用 localhost访问
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {　　　　　　　#定义服务器的默认网站根目录位置
            root   html;　　　　　　  #定义首页索引文件的名称
            index  index.html index.htm;
        }
　　　　　...　　　　　...　　　　　... (注释代码太多，就不全部贴出来了)
    include servers/*;
}

通过配置文件我们可以看到其默认的网站根目录为html（即/usr/local/var/www），而默认的索引文件为index.html 和 index.htm，这下就找到原因了，原来我们的根目录少了首页索引文件，那就来手动创建一个吧：

cd /usr/local/var/www/                      //进入到www目录下
touch index.html                            //创建一个新的index.html文件
vim index.html                              //编辑该文件

将如下代码写入index.html文件中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
    <div>
        <h1>我的nginx欢迎页面</h1>
    </div>
</body>
</html>

按esc键，输入:wq推出编辑并保存（这个相信大家都会，但还是强迫症的写上了）。

回到浏览器（localhost:8080）刷新：
　　在这里插入图片描述

多个Vue项目如何部署到服务器

一、vue打包

在项目中输入npm run build

此时会生产一个dist目录

二、将dist目录上传至ngnix中的html目录中

修改Nginx文件，找到nginx.conf
在这里插入图片描述

三、如果此时有多个vue项目呢？

多加几个location即可

在这里插入图片描述

四、最后记得保存

:wq

五、重新启动Nginx

sudo nginx -s reload

六：Nginx.conf的内容


server {
        listen       80;
        server_name  localhost;
 
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
 
        location / {
            root   html/dist/;
            index  index.html index.htm;
            try_files $uri $uri/ @router;
            index index.html;
        }
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
       location @router {
        #          #因此需要rewrite到index.html中，然后交给路由再处理请求资源
                  rewrite ^.*$ /index.html last;
        }
 
        location /admin {
            alias  /usr/local/nginx/admin/dist;
            index  index.html index.htm;
            try_files $uri $uri/ @router;
            index index.html;
        }
 
                #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的
       location @router {
      #          #因此需要rewrite到index.html中，然后交给路由再处理请求资源
            try_files $uri $uri/ @router;
            index index.html;
        }
 
                #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体>的文件
       location @router {
      #          #因此需要rewrite到index.html中，然后交给路由再处理请求资源
             rewrite ^.*$ /index.html last;
        }

终端运行：

sudo nginx -s  reload  // 修改配置后重新加载生效


sudo nginx -s stop  // 快速停止nginx

OK，大功告成啦！

star@星空

关注

9
点赞
踩
114

收藏

觉得还不错? 一键收藏
打赏
2
评论
vue项目如何部署到nginx服务器

mac下安装nginx安装工具：homebrew（还没用过的小伙伴可以点链接进行了解或者自行百度）步骤：1、打开终端，习惯性命令：更新brew update2、终端继续执行命令：brew search nginx //查询要安装的软件是否存在3、这里我们多执行一步“废”命令，不过有利于我们后面的配置：brew info nginx我们可以看到，nginx在本地还未安装（Not installed），nginx的来源（From），Docroot默认为/usr/local/v
复制链接

扫一扫