如何快速部署vue项目

前言

做为一个前端开发工程师，完成了自己的vue项目之后当然就是希望可以部署到服务器上，然后公网访问自己做的项目，但是在实际的开发工作中这部分的工作往往是由运维或者后端来完成的，所以很多前端不知道怎么部署vue项目到服务器，下面这篇文章就是会介绍几种简单的部署vue前端项目到服务器上的方式。

一、前端打包方式

vue项目想要部署到服务器上，首先不可避免的就是需要将我们的vue项目进行打包构建，将vue的代码编译打包成一个完整的前端项目，下面就是几种常见的打包方式

1.1 本地打包上传

我们可以通过在本地打包的方式，将打包后的文件直接通过filezilla（或者其他ssh工具）将打包后的文件传递到服务器上的指定文件夹下面：

// package.json
// 我这里是使用了vite进行打包，你也可以直接使用vue的打包指令
  "scripts": {
    "build": "vite build",
  },
//执行指令
npm run build

我们就可以在我们配置的打包路径下看的这个dist文件夹，这个就是打包之后的文件。

然后将文件使用工具传到服务器上。

1.2 脚本执行打包

首先我们可以通过代码管理工具将源码导入到服务器上（一般我们在开发过程中都会使用svn或者git进行代码的版本控制，我们可以利用这些工具将源码检出到服务器上），这里我就以svn为例子进行实践操作，代码提交到svn之后，执行下面的脚本进行打包：
记得提前在服务器上安装好node环境和vite环境（非必须）。

#!/bin/sh
export LANG=zh_CN.UTF-8
# svn的安装执行路径
SVN=/usr/bin/svn 
# 你需要检出源码的路径
WEB=/project/demo
$SVN update $WEB --username 你的svn用户名--password 你的svn用户密码 &&
cd =/project/demon &&
npm run build

这个时候我们就可以在服务器上看到dist文件夹已经生成

1.3 CI/CD构建打包（jenkins和github aciton待补充）

二、部署访问

前端vue代码打包完成之后，要想能够通过公网ip访问到，就需要使用nginx代理或者服务端渲染来实现，当然有其他的方法也可以在评论区分享一下:

2.1 nginx代理访问

我们首先找到打包上传好的dist文件夹的绝对路径，以上面为例：

/project/demo/dist

在nginx配置文件新增：

   server {
    listen 80;
    server_name yourDomain;  # 替换为你的域名或IP地址

    location / {
        # 如果请求的是根路径（/），则直接返回index.html
        if ($request_uri = / ) {
            rewrite ^ /project/demo/dist/index.html last;
        }

        # 如果你的项目需要处理其他静态文件（如js, css等），你可能需要添加其他location块
        location /project/demo/dist/ {
            alias /path/to/your/project/demo/dist/;  # 替换为实际的文件路径
            index index.html;
            try_files $uri $uri/ =404;
        }

        # 其他配置...
    }

    # 其他server块...
}

2.2 服务端渲染（以Egg框架为例，简单介绍，感兴趣的可以了解下）

也可以通过服务端渲染的方式来实现前端项目的访问，一般的后端框架都会有服务端渲染的插件，我们以node的egg框架为例，我们就可以通过下载egg-view-nunjucks插件来实现：
首先将打包好的文件dist移动到app/view文件夹下：

app/view/dist

然后下载插件和配置相关文件

npm install --save egg-view-nunjucks
// config/plugin.js
'use strict';
module.exports = {
  nunjucks: {
    enable: true,
    package: 'egg-view-nunjucks',
  },
 }
 //config/config.defalut.js
   config.view = {
    defaultViewEngine: 'nunjucks',
    mapping: {
      '.html': 'nunjucks',
    },
  };

新增路由和控制器文件：

  router.get('/index.html', controller.home.index);
  // app/controller/home.js
  const Controller = require('egg').Controller;

class HomeController extends Controller {
  // 首页
  async index() {
    const { ctx } = this;
    await ctx.render('dist/index.html');
  	}
  }
module.exports = HomeController;

然后访问对应的路由就可以访问到我们的前端项目了。
当然我们的后端项目也是需要部署的，这里介意参考另一篇文章：http://t.csdnimg.cn/hhSQr进行查看

总结

前端vue项目部署方式重要还是通过nginx代理进行访问，当然服务端渲染目前也是很流行的一种方式，前端只要掌握打包上传服务器的操作之后，就可以很轻松的通过nginx代理将前端项目部署到服务器上。本文的实例仅仅直供参考，具体的实践还需要小伙伴们亲自动手才行。有什么疑问我们也可以在评论区交流。