vue 项目发布在云服务器nginx中-springboot(7)

╰半夏微凉° 2022-04-02 09:42 230阅读 0赞

> 把后台打包发布了，然后就是打包前端并且发布了

# 正文 #

我前端用的是vue框架，现在要打包发布在nginx中。网上找了很多，但是不能用，还很复杂。当我自己测试成功后，觉得很简单。

*  首先需要装nginx，没有装的可以看这边 [链接][Link 1]
 *  打包  
    进入到vue项目路径中，运行`npm run build`  
    ![运行][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhYnliYWJ5dXA_size_16_color_FFFFFF_t_70]  
    成功后生成dist文件夹  
    ![成功][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhYnliYWJ5dXA_size_16_color_FFFFFF_t_70 1]
 *  发布  
    将dist文件夹上传至服务器中，并且放到`/usr/share/nginx/html`中  
    编辑配置文件

vim /etc/nginx/nginx.conf

内容为

server {
            listen       80 default_server;
            listen       [::]:80 default_server;
            server_name  自己的服务器;
            root         /usr/share/nginx/html/dist;
    
            # Load configuration files for the default server block.
            include /etc/nginx/default.d/*.conf;
    
            location / {
            }
            error_page 404 /404.html;
                location = /40x.html {
            }
    
            error_page 500 502 503 504 /50x.html;
                location = /50x.html {
            }
        }

其中要把`server_name`改成你们自己的ip地址，要注意的是，`root /usr/share/nginx/html/dist;`一定要到dist路径，不然访问的话是空白的。我之前就是，一直找不到原因。。。

[Link 1]: https://blog.csdn.net/babybabyup/article/details/79765563
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhYnliYWJ5dXA_size_16_color_FFFFFF_t_70]: /images/20220402/e8f68fa77fd84eabb5b515e30bb5724f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhYnliYWJ5dXA_size_16_color_FFFFFF_t_70 1]: /images/20220402/e317cadd3a61435a9239cf2090f1b94a.png