如何在nginx下部署vue项目

Posted 2023-01-30 十木禾

首先我们使用 npm run build 来生成项目的静态页面，会在项目的根路径的dist目录下

我们将dist下的 index.html和static静态文件发布到服务器的某一目录下

比如说我们发布的是 在 usr/local/vue/page下，那么我们对于nginx的配置如下

在/usr/local/nginx/conf下打开nginx.conf
修改service的内容如下

    server 
        listen       80;
        server_name localhost;

        location / 
            root usr/local/vue/page;
            try_files $uri $uri/ @router;
            index index.html;
        

        error_page 500 502 503 504 /50x.html;
            location = /50x.html 
            root html;
        
        location @router 
            rewrite ^.*$ /index.html last;
        
    

然后用nginx -s reload重新启动nginx即可

如果出现403 Forbidden的报错，应该是权限导致的，我们在nginx.conf文件头部加上user root;
如下

#user  nobody;
user root;
worker_processes  1;