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

朱雀 2022-12-20 11:24 271阅读 0赞

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

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

### mac下安装nginx ###

**安装工具：**

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

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

brew update

2、终端继续执行命令：

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

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

brew info nginx

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]  
我们可以看到，`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

open /usr/local/etc/nginx/

终端继续执行：

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

![在这里插入图片描述][20201112090131317.png_pic_center]  
　　会看到一个以当前安装的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的欢迎界面啦。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 3]  
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）刷新：  
　　![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 4]

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

##### 一、vue打包 #####

在项目中输入npm run build  
![在这里插入图片描述][20201112171912237.png_pic_center]  
此时会生产一个dist目录

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

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

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

多加几个location即可

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 6]

##### 四、最后记得保存 #####

`: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，大功告成啦！

[windows_nginx_Windows_Nginx]: https://blog.csdn.net/weixin_43638968/article/details/112711272
[nginx_gzip_vue-cli4_10M_300kb]: https://blog.csdn.net/weixin_43638968/article/details/109093199
[homebrew]: https://brew.sh/index_zh-cn.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/1ca5c9c9da5f46adad8cb13025c31336.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/8c2367c0d9c34e88a2e4c080ce37a23e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201112090010820.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA==,size_16,color_FFFFFF,t_70#pic_center
[20201112090131317.png_pic_center]: https://img-blog.csdnimg.cn/20201112090131317.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201112091132928.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20201112171734829.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA==,size_16,color_FFFFFF,t_70#pic_center
[20201112171912237.png_pic_center]: https://img-blog.csdnimg.cn/20201112171912237.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 5]: https://img-blog.csdnimg.cn/20201112172213226.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 6]: https://img-blog.csdnimg.cn/20201112172323751.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA==,size_16,color_FFFFFF,t_70#pic_center