nginx 部署 vue 项目

  记录一下自己在阿里云服务器上部署 vue 项目的一些点。

  这里以 my-vue 为例进行打包部署,准备内容:服务器(阿里云 Cent OS)、域名(阿里云)。

1、打包上传

  将打包后的 dist 文件夹上传到服务器的/mnt/projects/my-vue路径下。

2、安装 nginx

  参考 Cent OS 基础环境搭建 - 安装 nginx

3、解析域名

4、配置 nginx

1
2
cd /etc/nginx/conf.d
vim my-vue.conf

输入以下内容并保存:

1
2
3
4
5
6
7
8
9
10
11
12
13
server {
listen 80;
server_name my-vue.liuxianyu.cn;
root /mnt/projects/my-vue;

location / {
try_files $uri $uri/ /index.html;
}
location /api {
client_max_body_size 15m;
proxy_pass http://localhost:8081/api;
}
}

location /api是通过 nginx 转发网络请求,无请求的项目可不添加。

5、检查、重启 nginx

1
2
// 检测配置文件是否有语法错误,然后退出
nginx -t
1
nginx -s reload
以上

随笔标题:nginx 部署 vue 项目

随笔作者:刘先玉

发布时间:2020年07月14日 - 18:43:10

最后更新:2020年07月14日 - 18:43:10

原文链接:https://liuxianyu.cn/article/nginx-vue.html