Vue部署到Nginx

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;
}

修改server的root为 /www/server/nginx/html/dist

5、重载配置并且重启Nginx服务

打开网页：