Nginx部署Vue项目

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

vue-element-admin项目地址 https://gitee.com/mirrors/vue-element-admin?_from=gitee_search

1.本地启动 vue-element-admin 项目

# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git

# 进入项目目录
cd vue-element-admin

# 安装依赖
npm install

# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm run dev

本地启动成功

页面访问正常

2.发布 将项目打包

ctrl+C关闭项目

运行打包命令

# 构建生产环境
npm run build:prod

多出一个dist文件夹

dist就是打包好的文件夹，将这个文件夹上传到服务器中

注意这里一定要上传到Nginx的目录下面！！！！！！！！！！！！！！！！！！

3.配置Nginx

添加一个server

修改参数：

listen ： 访问端口号

server_name ：访问地址

root ：vue项目的打包后的dist位置（但dist一定要放在Nginx文件下面）

使用地址访问：

server {
        listen       8871;#默认端口是80，如果端口没被占用可以不用修改
        server_name  localhost;

        #charset koi8-r;
    
        #access_log  logs/host.access.log  main;
        root        html/vue-admin/dist;#vue项目的打包后的dist
    
        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
  }

使用域名访问：

server {
        listen       80;#默认端口是80，如果端口没被占用可以不用修改
        server_name  域名;

        #charset koi8-r;
    
        #access_log  logs/host.access.log  main;
        root        html/vue-admin/dist;#vue项目的打包后的dist
    
        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
  }

Nginx配置HTTPS请看

https://www.jianshu.com/p/806ad65d613e

4.访问项目

服务器地址:8871