【纯前端方案】无需部署后端代码

【纯前端方案】无需部署后端代码 [复制链接]

帖子链接已复制到剪贴板

马亮南生 (UID: 2521) 3月前

897 10

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

# 为什么有这篇文章？
对于 **==纯前端==** 同学来说学习南生论坛我还要在本地部署后端代码？真坑啊~放弃放弃！！！
故：为了解决前端同学的后顾之忧，作者就写一篇只在本地部署前端代码就可以玩转的方案。
看作者如此用心的份上给个star吧⭐[bbs-vue-ui](https://github.com/maliangnansheng/bbs-vue-ui)

# 第一步（安装部署）

## 环境准备

### 1. 安装nodejs

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

管理nodejs作者推荐使用`NVM` ：[NVM 安装使用介绍](http://bbs.nanshengbbs.top/detail/186)

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

![](http://76.nanshengbbs.top/articlePicture/idea013.png)

### 2. 安装yarn

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

```sh
npm i -g yarn
```

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

![](http://76.nanshengbbs.top/articlePicture/idea014.png)

## pull源码并导入idea

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

```sh
# 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直接看图

![](http://76.nanshengbbs.top/articlePicture/idea011.png)

> 效果

![](http://76.nanshengbbs.top/articlePicture/idea012.png)

## 启动项目

1. 安装项目依赖⭐

```sh
yarn
```

![](http://76.nanshengbbs.top/articlePicture/idea015.png)

2. 启动项目

```sh
yarn serve
```

![](http://76.nanshengbbs.top/articlePicture/idea016.png)

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

实在不能和作者保持一致的请参考以下配置：
nodejs版本==高于==作者，package.json配置文件中的scripts替换成如下内容：
```json
"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下载地址：[http://nginx.org/en/download.html](http://nginx.org/en/download.html)

### 配置文件修改

![](http://76.nanshengbbs.top/articlePicture/idea010.png)

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

```sh
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";
}
}
}
```