vue-cli 和 express+mongodb结合!
来源:互联网 发布:网络的拓扑结构 编辑:程序博客网 时间:2024/06/02 00:00
1.其实自动解除vue一来,就一直在想这个问题,问题是:express后台有一个服务是3000端口,然后vue-cli又开启了一个8080端口,
那么怎么把他们两个结合在一起呢?
要跨域吗?
部署到服务器的时候应该运行这个npm run dev的命令吗和npm run build的命令吗????等等一大堆的问题
2.原因在于现在太多的前端工具帮我们做了太多,而我们只学会了打命令,而没有搞清楚这些命令到底做了些什么
首先VUE 是一个javascript的前端框架,注定了它是运行在浏览器里的,对服务器本地没有任何要求,只要一个静态文件服务器能通过http访问到其资源文件就足矣!无论你是用apache ,ngnix 就算你要用node 自己实现一个静态文件服务器,也用不了多少行代码。
npm run dev 是用来在本地开发的时候做调试用的,vue开发的是前端的东西,不是nodejs 服务端程序,按道理讲,生产环境里就不该存在npm,甚至nodejs也不需要(用nodejs来做web静态服务的除外),楼主通过ssh进入到服务器里,再运行npm run dev 来启动哪是开发机上做的事情。正确的做法很简单,通过npm run build 把生成的dist文件夹(不要上传文件夹)里的内容上传到http服务器上就可以通过 http来访问了,开发机上正常,上传以后 程序出现错误不能运行的原因99.99%的可能性是你引用资源的路径有问题。
3.那么现在问题来了!
a.我们本地应该怎么开发呢,两个端口不一样,这个8080端口访问3000端口的资源是不是涉及到了跨域的请求呢?
解决的办法很简单,改一下vue-cli项目里面的config/index.js文件
这样当在前端用axios访问 '/api' 的时候,就会被代理到 'http://localhost:3000/api',从而获得需要的数据.
b.当你过五关斩六将忠于将这个项目开发完成了之后,我们如何把它部署到我们的服务器上面去呢?
首先你在你项目运行 npm run build 这个命令那么你的项目就会被打包成一个dist目录,如果是一个静态的没有与后台产生交互的,那么你现在就可以点击这个文件夹里面的index.html运行了
npm run build
前端开发完成后,就可以用webpack打包了,注意将config/index.js文件里面的productionSourceMap设为false, 不然打包出来文件很大,最后用express.static中间件将webpack打包好的项目目录'dist'作为express静态文件服务的目录.
app.use(express.static('dist'))
c.前后端分离,就是与将这个生成的dist目录和express后台结合起来,然后部署到服务器上面呢,应该怎么弄呢
1.进入服务器的/www文件夹下面然后新建一个文件夹moive,然后提升这个文件夹的读写权限
提升权限:sudo chmod 777 moive
2.在你的项目里面新建一个ecosystem.json文件,然后
然后在这个文件夹下面运行命令(运行这个命令之前呢,我们还需要就是提交更新一下代码) pm2 deploy ecosystem.json production setup显示成功之后你就能在服务器的那个moive文件夹下面看到production这个文件了哦
部署成功之后呢,你这里就会出现一个production的文件夹
然后pm2 deploy ecosystem.json production进行pm2托管
项目发布的地址:vuecli.lovezhishu.cn
github地址:https://github.com/zhalice2011/vuecli
- vue-cli 和 express+mongodb结合!
- vue结合vue-cli项目搭建
- vue-cli结合vuex架构目录
- Vue-cli安装和使用
- Vue-cli安装和使用
- express和MongoDB
- 基于vue-cli及express模拟Ajax获取服务器数据
- vue-cli与webpack结合如何处理静态资源
- vue-cli
- vue-cli
- vue-cli
- webstrom2016开发vuejs和vue-cli安装
- vue-cli和webpack项目搭建
- MEVN 架构(MongoDB + Express + Vue + NODEJS)制作网站
- 记小白的一次基于vue+express+mongodb个人站开发
- node.js 之 express框架+MongoDB(前端使用vue)
- vue+express+mongodb+websocket 仿QQ即时聊天项目
- nodejs开发——mongodb数据库与express框架结合
- 多线程进阶007 之 处理非正常的线程终止和JVM关闭
- Java中的一些小点
- Unity Learning for Day 12
- css知多少(5)——选择器
- C#中Ini文件读写操作
- vue-cli 和 express+mongodb结合!
- Java集合类详解
- Android7.0中文文档(API) --- RadioButton
- 雕虫小技也重要--数据处理中的电子表格技巧
- C++ Algorithm 不改变参数的函数详解
- 第一篇
- IntelliJ使用指南—— 导入Eclipse的Web项目
- C语言实现单链表面试题--进阶(带环问题)
- C#学习笔记(1)_用EditPlus编译运行C#程序