nginx 部署前端项目（vue）

前提：安装好nginx

打开nginx目录，一般是（/usr/local/nginx）
npm run build 打好vue包一般放到（/usr/local/nginx/html/）目录下

配置：nginx

打开（/usr/local/nginx/conf）目录
新建一个 xxx.conf 文件，写入：

server {

        listen       80;    //映射出的端口

        server_name  abc.com; //访问的域名或ip(默认是localhost，有时会被占用，是不是随便输个域名都可以？待验证)

        location / {

	    root   /usr/local/nginx/html/prod_dist; //放代码的路径（index.html的根目录）

            index  index.html index.htm;

        }

        error_page   500 502 503 504  /50x.html;

        location = /50x.html {

            root   html;

        }

}

还是此目录，打开nginx.conf,找对位置（在http内的标记一和标记二）

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;

//标记二：开启压缩静态资源

    gzip  on;

    gzip_min_length 1k;

    gzip_buffers 4 16k;

    gzip_comp_level 2;

    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

    gzip_vary on;

    gzip_disable "MSIE [1-6]\.";

    include api.conf;

    include  xxx.conf;  //标记一，引入server配置

重启nginx生效配置

进入 /usr/local/nginx/sbin

命令行：./nginx -s reload

完成：访问abc.com

参考网站

https://blog.csdn.net/qq_35620501/article/details/89408581 资源压缩

巴特西

nginx 部署前端项目（vue）

前提：安装好nginx

配置：nginx

重启nginx生效配置

参考网站

最新文章

热门文章