美文网首页
vue打包使用nginx部署

vue打包使用nginx部署

作者: 来一碗花甲粉 | 来源:发表于2019-04-16 14:12 被阅读0次

1.nginx安装

2.nginx启动

安装启动,此处不做介绍

3.vue打包

npm/yarn打包命令
最终生成dist文件包

4.nginx配置

若nginx配置过多,可以使用includ,主配置文件包含多个子配置文件
主配置nginx.conf


worker_processes  1;

events {

    worker_connections  1024;

}

http {

    include       mime.types;

    default_type  application/octet-stream;

    sendfile      on;

    keepalive_timeout  65;

    include extra/www1.conf;

    include extra/www2.conf;

}

子配置extra/www1.conf

server {

        listen 8000; # 监听端口

        server_name  www.data.com; # 域名

        location / {

             root   /Users/xxx/frontend/dist/; # vue打包文件路径
 
             index  index.html;

             try_files $uri $uri/ /index.html; #目录不存在则执行index.html
        }
        # 后台api,vue路由中统一加了api,
        location /api {
            proxy_pass http://10.27.250.247:8280/art/api/action;
        }
       # 多个后台接口
        location /api/manage {
            rewrite ^/api/manage/(.*) /$1 break; # 路由重写,适配后台api
            proxy_pass http://10.27.0.143:8283;
        }
}

5.nginx重启

平滑重启

nginx -s reload

注意:修改配置文件后最好先检查一下配置文件是否正确,避免重启后出现错误影响正常运行。判断Nginx配置是否正确的命令如下:

//检测指定的配置文件
nginx -t -c /usr/nginx/xxx/nginx.conf

//检测默认的配置文件
nginx -t

6.尝试访问

相关文章

  • docker部署前端和后端打包程序

    docker部署前端vue打包程序、后端java打包程序。前端vue打包后部署在nginx容器,后端部署在jdk8...

  • Nginx | 常用配置

    Nginx 常用功能 常用配置详解 Nginx 部署 Vue 项目 将 Vue 项目build打包后生成的 ...

  • Nginx本地部署Vue项目

    如何使用Nginx来部署我们打包好的前端Vue项目 Nginx 环境搭建 因为这里做的演示是本地服务,就需要安装在...

  • vue打包使用nginx部署

    1.nginx安装 2.nginx启动 安装启动,此处不做介绍 3.vue打包 npm/yarn打包命令最终生成d...

  • Docker + Nginx 部署 Vue 项目

    背景 我们在部署 Vue 项目时,可以通过 webpack 打包 + nginx 的部署方法,如果加上 Docke...

  • (vue前端+java后台)使用nginx服务项目部署

    一、部署vue项目(pc端、移动端)->nginx服务 1.vue项目打包: ①打开【项目目录/config/i...

  • 多个vue项目部署nginx

    1.vue打包 把dist目录下的文件拷贝到nginx相应目录下 2.nginx配置 vue代码部署到ng上默认是...

  • Vue Nginx部署

    在服务器上部署vue项目 并使用 前提:保证服务器已安装Node.js Nginx 别忘记上传打包后dist至服...

  • Linux的nginx环境的vue 部署

    使用npm run build打包Vue项目(在此使用的是IVue-Admin框架),生成打包文件 查看nginx...

  • Nginx部署Vue项目

    本文通过部署vue-element-admin后台管理项目来通俗易懂的教大家如何使用Nginx快速部署Vue项目 ...

网友评论

      本文标题:vue打包使用nginx部署

      本文链接:https://www.haomeiwen.com/subject/chkbwqtx.html