nginx部署vue项目

修复bug

已于 2023-01-17 09:56:20 修改

阅读量1.7k

点赞数

分类专栏： nginx 文章标签： nginx vue 前端 Powered by 金山文档

于 2023-01-17 09:13:55 首次发布

本文链接：https://blog.csdn.net/m0_71349739/article/details/128711694

版权

nginx 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、项目打包

打开vscode在vue根目录打开命令行输入npm run build，这时就能看到dist文件夹，我们要将dist文件夹放到服务器上。

二、配置nginx

找到官网下载安装包

找到nginx下载安装目录，打开conf文件夹打开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;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  localhost; #监听链接名称，可以修改

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   E:/vue/base/dist/;
            #root 是dist文件根目录，大家路径不一样，配置一下就可以了
            index  index.html index.htm;
        }
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        #开启局域网访问
        location ~ \.php$ {
            root           html;
            fastcgi_pass   127.0.0.1:9000;
            fastcgi_index  index.php;
            fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
            include        fastcgi_params;
        }
    }
}