vue前端express后端项目开发环境搭建

相信刚学vue的朋友会感觉稍微有点陌生,找到一个好的demo将会让你快速上手vue,作者基于单页应用搭建了vue后台项目,相信会对初学vue的朋友有较大的帮助,项目地址:https://github.com/guodonglw/vue_admin

下面将对整个前后端项目环境的搭建进行一个介绍。

web端vue项目

一、运行环境

node

二、开发环境搭建

// 将项目拉到本地
git clone 项目地址

// cd到本地项目下
cd ../vueProject

// 安装项目运行需要的依赖包
npm install / cnpm install  (注:如需运行cnpm install,需先安运行npm install cnpm安装cnpm)

// 若在npm install后,提示需要执行npm audit fix则继续执行该命令
npm audit fix

// 在本地开发时,运行项目
npm run dev / cnpm run dev

开发环境,在执行完上述步骤后,浏览器访问http://localhost:8082,可跳转到对应页面 (推进chrome浏览器)

三、项目发布

在开发环境中完成项目开发后,要将项目发布到服务器(如nginx服务器),首先在./config/prod.env.js的BASE_URL单引号内填上
请求地址(Server的接口地址,该处必须在双引号中将url地址用单引号包住,因为需要直接返回字符串路径时,就必须采用单引号把
字符串内容括起来,如BASE_URL:"‘http://192.168.1.111:4000/api’"),在url后加端口号加’/api’,这是由于F2FAdminServer
端接口统一用了’url’ + ‘:’ + ‘端口号’ + '/api’的形式,在完成上述修改后,进行下面的操作。

// 项目打包
npm run build / cnpm run build

// 查看是否生成了dist文件夹
在文件夹下包括index.html文件和static文件,如作了标题旁的图片,可能还有logo.ico

// cd到dist文件夹下
cd ./dist/

// 将dist文件夹下的static的文件夹与index.html文件直接放在nginx服务器根目录下

// 配置nginx,在nginx.conf文件中修改所要监听的端口

// chrome浏览器访问对应的域名,如http://xxx.xxx.com:123/
如部署到个人服务器,没有域名,访问地址为http:// + ip + :端口号

在跳转到登录页面后,输入数据库对应表(如admin)中对应的账号/密码(如:lilei/123456),若跳转到首页页面,则部署成功,否则根据所出现
的问题(按F12调出控制台进行查看),解决出现的问题,然后重复上述步骤。

server端express项目

一、概述

server端服务器部署分为node.js服务器和MySQL数据库两部分工作

二、node.js服务器相关

一、node.js环境安装

方法一

wget https://nodejs.org/dist/v4.4.4/node-v4.4.4-linux-x64.tar.xz
tar -xvf node-v4.4.4-linux-x64.tar

方法二

sudo apt-get node

二、forever守护进程模块

node安装完成后,需要使用npm安装forever守护进程模块

// 全局安装
npm install -g forever

// 启动项目进程
forever start app.js

// 重启项目进程
forever restart app.js

//停止项目进程
forever stop app.js

三、MySQL数据库

如使用自己服务器数据库,需要安装MySQL

// 数据库初始化
mysql –uroot –p </root/xxx.sql

四、服务器部署与启动项目

// 安装项目依赖
npm install / cnpm install 

// 若在npm install后,提示需要执行git audit fix则继续执行该命令
npm audit fix

// 临时启动项目(检查项目是否有错误)
node app.js

// 后台守护进程启动项目
forever start app.js

如果感觉作者说的对你有帮助的话,欢迎点星点赞?

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值