saber酱的抱枕

生于忧患,死于安乐

11/12
20:46
学习

vue 项目上线记录

vue 项目上线记录

http://vueshop.pixiv.download/

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

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

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

vue 项目上线记录

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

vue 项目上线记录

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

vue 项目上线记录


上线之前

上线之前要做一些准备。

切换 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 项目上线记录

  1. 蛋糕
    Google Chrome 84Google Chrome 84WindowsWindows

    可以优化一下选择框点击文字无效必须点击文字左侧圆点问题、选择地址那一块的选项卡总觉得有些卡顿(如果是我电脑问题当我没说)可以优化一下,还有选项卡、点击左侧菜单栏加载页面蓝色圆圈显示在右侧【退出】按钮上的问题,嘛也只是个人观点,不过总的来说这是一个非常好的项目,尤其是权限分配展示那一块让我耳目一新,学到了布局的一些方式,感谢saber(*/ω\*)

    回复
    1. saber 文章作者
      Google Chrome 87Google Chrome 87WindowsWindows

      感谢你的意见~我也是跟着视频现学的。
      选择框点击圆点才能选择,是级联选择器吗,那个是 element-ui 自己的问题,我没去改
      https://element.eleme.cn/#/zh-CN/component/cascader
      用的是“选择任意一级选项”这部分,它有这个问题。
      右上角的加载圈圈有点恶心。页面顶部的进度条是使用的一个npm包叫做 nprogress,不清楚是不是它的问题,确实很多余。

      回复