nginx部署vue

Posted on | Edited on | In | Comments: | Views:

用nginx部署vue生成的静态文件

项目的后端在之前已经部署了, 现在要部署前端了

生成静态文件

1
2
3
4
5
# 安装依赖
yarn install

# 生成静态文件
yarn run build

如果安装依赖失败请先升级你的node版本;

生成成功后, 文件会放置在./dist文件夹里

上传文件到服务器

可以用scp之类的命令

这里用的是

1
scp -r dist root@ip:path

向nginx配置文件添加内容

添加以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
server {
    listen       80;
    server_name localhost;

    error_page 405 =200 $uri;

    location / {
        root /root/frontEnd/dist;
        try_files $uri $uri/ @router;
        index index.html;
    }

    location @router {
        rewrite ^.*$ /index.html last;
    }
}

重启nginx

1
systemctl restart nginx.service

测试

访问80端口就可以看到了

坑点

nginx默认不允许用post方法来请求静态文件, 所以要加上

1
error_page 405 =200 $uri;