Nginx 部署Vue前端项目

1.Vue前端构建

➜ npm run build

构建成功后基本会在配置的dist文件下生成静态html文件。

2.生成的静态代码上传到服务器

把生成目录dist里的文件打包上传至服务器(192.168.234.97)

➜ scp ./dist.zip root@192.168.234.97:/opt/www/vue-base

输入服务器登录密码。

上传到服务器静态地址

➜ /opt/www/vue-base

3.解压 dist.zip

➜ unzip dist.zip

4.Nginx 配置

Nginx 安装目录

➜ cd /opt/software/nginx

进入Nginx安装目录，修改 Nginx 的配置文件:

➜ vim conf/nginx.conf

修改如下：root 映射到静态代码文件夹：

location / {
    #root   html;
    root   /opt/www/vue-base/dist;
    index  index.html index.htm;
}

5.启动Nginx

进入Nginx安装目录，执行命令：

➜ ./nginx

重启Nginx

➜ ./nginx -s reload

6.访问

http://192.168.234.97