Vue部署到Nginx

部署Vue应用至Nginx

最新推荐文章于 2024-08-12 10:39:57 发布

原创最新推荐文章于 2024-08-12 10:39:57 发布 · 408 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #vue.js #运维

笔记专栏收录该内容

39 篇文章

订阅专栏

1、首先在宝塔的软件商店中安装Nginx

打开首页显示

在这里插入图片描述

2、在Vue的项目中新建终端执行：npm run build

得到dist文件夹

在这里插入图片描述

3、上传dist文件到宝塔的/www/server/nginx/html路径下：

在这里插入图片描述

4、配置Nginx，打开Nginx管理—配置修改：

在这里插入图片描述

server
{
    listen 80;
    server_name mayibang.co *.mayibang.co;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/mayibang.co/public;
    
    #SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则
    #error_page 404/404.html;
    #SSL-END
    
    #ERROR-PAGE-START  错误页配置，可以注释、删除或修改
    error_page 404 /404.html;
    error_page 502 /502.html;
    #ERROR-PAGE-END
    
    #PHP-INFO-START  PHP引用配置，可以注释或修改
    include enable-php-72.conf;
    #PHP-INFO-END
    
    #REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
    include /www/server/panel/vhost/rewrite/mayibang.co.conf;
    #REWRITE-END
    
    #禁止访问的文件或目录
    location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)
    {
        return 404;
    }
    
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    {
        expires      30d;
        access_log off; 
    }
    
    location ~ .*\.(js|css)?$
    {
        expires      12h;
        access_log off; 
    }
    access_log  /www/wwwlogs/mayibang.co.log;
}