⭐ 表示需要特别注意的步骤

为什么有这篇文章？

对于 ==纯前端== 同学来说学习南生论坛我还要在本地部署后端代码？真坑啊~放弃放弃！！！ 故：为了解决前端同学的后顾之忧，作者就写一篇只在本地部署前端代码就可以玩转的方案。 看作者如此用心的份上给个star吧⭐bbs-vue-ui

第一步（安装部署）

环境准备

1. 安装nodejs

怎么安装自己谷歌/百度 node和npm的版本==尽量和作者一致==哈，其他版本作者也没有测试过（不清楚有没有问题）

管理nodejs作者推荐使用NVM ：NVM 安装使用介绍

验证安装是否成功，出现下面的版本号说明安装成功

2. 安装yarn

更多安装方式自己谷歌/百度

npm i -g yarn

验证安装是否成功，出现下面的版本号说明安装成功

pull源码并导入idea

为什么不用vscode？不要问，问就是作者习惯idea了...

# github（Vue2和Vue3二选一即可）
git clone https://github.com/maliangnansheng/bbs-vue-ui.git
git clone https://github.com/maliangnansheng/bbs-vue3-ui.git

# or

# 码云（Vue2和Vue3二选一即可）
git clone https://gitee.com/maliangnansheng/bbs-vue-ui.git
git clone https://gitee.com/maliangnansheng/bbs-vue3-ui.git

导入idea直接看图

效果

启动项目

1. 安装项目依赖⭐

   yarn
   

   

2. 启动项目

   yarn serve
   

   

失败（成功请忽略）

启动失败 99% 的原因都是因为你本地nodejs版本与作者教程提供的版本不一致导致的，请和作者教程版本保持一致！

实在不能和作者保持一致的请参考以下配置： nodejs版本==高于==作者，package.json配置文件中的scripts替换成如下内容：

"scripts": {
    "serve": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
  },

第二步（安装Nginx）

Nginx下载地址：nginx.org/en/download…

配置文件修改

进入你刚刚安装的nginx目录下的conf文件夹，打开nginx.conf文件替换掉里面的所有内容（能搞明白的自己提取核心代码）

worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;
    
    # 纯前端
    server {
        listen 80;
        server_name 127.0.0.1;
        gzip on;
        gzip_min_length 1k;
        gzip_comp_level 9;
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        gzip_vary on;
        gzip_disable "MSIE [1-6]\.";
        charset utf-8;

	# 南生论坛ui
        location / {
            # 限制请求数据大小
            client_max_body_size 50m;
            proxy_pass http://127.0.0.1:8082;
            # 转发时，携带本身的host头信息，而不是127.0.0.1
            proxy_set_header Host $host:80;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Via "nginx";
        }
        # 南生论坛service
        location /api {
            # 限制请求数据大小
            client_max_body_size 50m;
            proxy_pass http://139.9.78.65:7010/api;
            # 转发时，携带本身的host头信息，而不是127.0.0.1
            proxy_set_header Host $host:80;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Via "nginx";
        }
    }
}

启动nginx ⭐

==浏览器访问 http://127.0.0.1 出现以下视图说明nginx启动成功了，否则需要排查下启动失败的原因==

浏览器访问

南生论坛【管理员】账号：椿/123456

http://127.0.0.1 成功啦啦啦啦~~~

代码贡献

有兴趣的童鞋： 可以根据这个后端API接口开发自己的前端项目

Swagger：http://127.0.0.1/api/doc.html

注：请使用http://127.0.0.1/api/doc.html访问，否则登录不了！⭐⭐⭐ 南生论坛【管理员】账号：椿/123456⭐⭐⭐

推荐使用 不同 于作者的技术选型

• 方案一： 源码发我，我来开源，外链你们对应平台的账号
• 方案二： 你开源，我外链你的开源项目地址