http://vueshop.pixiv.download/

最近在b站跟着视频教程做一个简单的 vue 后台管理系统，内容也挺长的，花了6天时间做完了。今天优化一下打包，放到服务器上，花了七天。记录一下上线的过程。

这个项目要上线的部分分为两部分。

第一部分是网站后台（登陆、api请求等），这是 up 提供的做好的 nodejs 项目，直接运行 node app.js，就会启动一个本地网址提供服务。

第二部分是 vue 开发的前台页面，也就是这个管理系统。做完之后打包出来，生成的静态文件（dist 文件夹）也放进一个文件夹里，用 express 启动简单的 http 服务，也是运行 node app.js，启动一个本地网址，可以打开这个管理系统。

dist 文件夹里是打包生成的内容。这个 http 服务会把这个文件夹当作一个静态网站访问。

---

上线之前

上线之前要做一些准备。

切换 api 地址

后台的本地网址是 http://127.0.0.1:8888/api/private/v1/，开发时前台页面直接使用个这个网址就行。我打算把网站放到域名 vueshop.pixiv.download 上，如果别人通过这个域名打开网站，请求后台就不能用本地的 http://127.0.0.1:8888/api/private/v1/ 了，因为这实际上是请求浏览者自己电脑的本地地址，当然就会出错。所以网站上线后请求的后台 api 网址应该也换成互联网地址，比如放到同域名下的 http://vueshop.pixiv.download/api/private/v1/。

这里可以用 vue 环境变量来做区分。开发环境和生产环境设置好不同的 api 地址，这样打包时就会自动使用生产环境的地址。

.env.development 文件：

VUE_APP_API_URL = 'http://127.0.0.1:8888/api/private/v1/'

.env.production 文件：

VUE_APP_API_URL = 'http://vueshop.pixiv.download/api/private/v1/'

项目中请求 api 时不直接写网址，而是引用这个环境变量 process.env.VUE_APP_API_URL。

api 后台配置

因为要把后端放到我的服务器上，这个后端有个 sql 文件，需要创建个数据库，把这个 sql 文件导入进去。

mysql -u root -p

// 输入密码进入 mysql 命令行

create database vvvv;

use vvv;

source /db.sql;

// 导入完成之后，查看生成的表
show tables;

数据导入之后，编辑后台配置文件的数据库连接信息，使其能够连接到服务器的数据库。

上线

把 api 后台和前台文件都打包传到服务器上。为这个网站创建一个文件夹，把它俩分开解压到里面，依旧是分成两个文件夹。

运行项目

因为这俩都是 nodejs 做的后台，所以分别进入这两个文件夹，先安装依赖项 npm i，然后使用 nodejs 的守护进程，如 pm2、forever 启动这两个项目。

pm2 start app.js --name vueshop_api

pm2 start app.js --name vueshop_dist

api 端的网址是 http://127.0.0.1:8888 开头，前台网站则可以通过 http://127.0.0.1:81 访问。

配置 nginx

现在项目都在本地启动了，但是还不能通过域名 vueshop.pixiv.download 访问。

在域名控制面板把这个域名绑定到服务器上，然后使用 nginx 建立一个配置文件，在 80 端口监听 vueshop.pixiv.download 这个域名，然后进行转发。（是 http，没搞 https，因为嫌麻烦）

如果访问的网址是请求 api 的，就转发到 api 的本地网址去处理。

如果请求的网址是非 api 的，也就是前端网站，那就转发到前端的本地网址。

server {
    listen  80;
    server_name vueshop.pixiv.download;
    charset utf-8;
    client_max_body_size 2m;

  location /api/ {
    proxy_pass http://127.0.0.1:8888;
  }

    location / {
        proxy_pass  http://127.0.0.1:81;
    }
}

前台网址如 http://vueshop.pixiv.download/#/users 会请求前台的 nodejs 服务器。前台页面请求后台数据时，请求会被转发到 api 的 nodejs 服务器地址。

这里两个转发规则的顺序需要注意，需要特殊处理的排在前面。如果顺序颠倒了，可能就不是预期的效果了。

vue 项目上线记录