读万卷书不如行万里路,必须实践出真理!

看官方文档安装项目vue init nuxt-community/starter-template <project-name>注意:这是新手项目不适合直接用的

用我用的express的官方项目vue init nuxt/express  <project-name>

大神有讲解但是没有源码https://juejin.im/post/598aabe96fb9a03c335a8dde

1.使用FormData提交文件时

上传的内容保存在Request Payload中而不是请求信息的body中

因为HTTP POST表单请求提交时,使用的Content-Type是application/x-www-form-urlencoded,而使用原生AJAX的POST请求如果不指定请求头RequestHeader,默认使用的Content-Type是text/plain;charset=UTF-8。Content-Type不是application/x-www-form-urlencoded的POST请求是不会读取请求体数据和进行相应的参数处理的

解决方案:

1、设置请求的Content-type字段为application/x-www-form-urlencoded

xhr.open("post", "/register", true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(formData);

此时在后台可以获取到req.body中的数据。

2、使用express的中间件connect-multiparty ,它是专门处理此类post数据相关的依赖包。
安装依赖以后在服务器端使用:

var multipart = require('connect-multiparty');

var multipartMiddleware = multipart();
app.post('/register', multipartMiddleware, function(req, res) {
console.log('get FormData Params: ', req.body);
});

参考地址:https://www.jianshu.com/p/39178bc6a833

但是增加了

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");后后台nodereq.body有值
但是var form = new formidable.IncomingForm();
form.parse(req, function(err, fields, files) {}
就不会执行了所以不能加 -----------------------------------------------
上线问题在本地打包npm run build是没有问题的
但是到线上虚拟机上打包就有问题了
一直给我报

npm ERR! code ELIFECYCLE
npm ERR! errno 137
npm ERR! nuxttest1@1.0.0 build: `nuxt build && backpack build`
npm ERR! Exit status 137

这个问题是因为内存不足导致

加上管理员权限 sudo npm run build网上说可以获得更多的内存吧好像

但是我一直报 sudo npm command not found

chmod -R 755 /opt/node
sudo ln -s /{自己的路径}/node /usr/bin/node
sudo ln -s /opt/node/lib/node /usr/lib/node
sudo ln -s /opt/node/bin/npm /usr/bin/npm
这样获取后就可以sudo了
但是我的虚拟机实在太差了所以还是不行,只能本地打包后再丢上去虚拟机跑了 nuxt.js源代码如果不想放在服务器上,可以删除除了.nuxt, build, node_modules文件夹和package.json文件的其他文件和文件夹,但是每次发布build和.nuxt两个文件夹和package.json文件需要进行更新,如有依赖包更新,直接运行更新依赖包命令就可以了

另外默认的服务是host在127.0.0.1本机上,在部分服务器上,如云服务器使用虚拟ip的服务器上,localhost和127.0.0.1都可以访问,但是使用内网的ip无法访问,这也直接导致了服务器外网即使端口开启了,也没有办法访问站点,需要更改server/index.js的host配置,去掉host参数

然后重新编译运行,发布就可以了。

nuxt.js还在发展阶段,很期待即将到来的1.0的版本,其实现在线上的项目已经开始使用了,如果觉得不错,那么试一试吧,用得人多了,发展也就更快了!

chmod xxx < file-name > 经常要用改目录权限不然传不上 -f遍历

参考https://www.cnblogs.com/stealth7/p/7299614.html

然后用pm2来管理node进程就不需要一直开着窗口pm2 start npm --name "进程名字" -- run start

nuxt.js实战踩坑记录的更多相关文章

  1. Nuxt.js的踩坑指南(常见问题汇总)

    本文会不定期更新在nuxt.js中遇到的问题进行汇总.转发请注明出处,尊重作者,谢谢! 强烈推荐作者文档版踩坑指南,点击跳转踩坑指南 在Nuxt的官方文档中,中文文档和英文文档都存在着不小的差异. 1 ...

  2. node+express第一次实战踩坑记录

    读万卷书不如行万里路,必须实践出真理! 问题1:项目结构该搭建成什么样? 我一个node.js小白,完全没有想法!再见! 找找别人的项目看看别人放的什么项目结构,再结合自己的项目需求我来想想!

  3. ABP框架踩坑记录

    ABP框架踩坑记录 ASP.NET Boilerplate是一个专用于现代Web应用程序的通用应用程序框架. 它使用了你已经熟悉的工具,并根据它们实现最佳实践. 文章目录 使用MySQL 配置User ...

  4. 复杂业务下向Mysql导入30万条数据代码优化的踩坑记录

    从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负责的模块connector就派上了用场. ...

  5. VUE使用微信JDK(附踩坑记录)

    VUE使用微信分享SDK(附踩坑记录) 微信分享官方文档 安装JS-SDK npm i -S weixin-jsapi 引入包 ES5 写法 const wx = require('weixin-js ...

  6. manjaro xfce 18.0 踩坑记录

    manjaro xfce 18.0 踩坑记录 1 简介1.1 Manjaro Linux1.2 开发桌面环境2 自动打开 NumLock3 系统快照3.1 安装timeshift3.2 使用times ...

  7. Android 上传开源项目到 jcenter 实战踩坑之路

    本文微信公众号「AndroidTraveler」首发. 背景 其实 Android 上传开源项目到 jcenter 并不是一件新鲜事,网上也有很多文章. 包括我本人在将开源项目上传到 jcenter ...

  8. 移动端Video标签踩坑记录

    需求 用户能在手机上上传视频并预览. 问题 上传完成后安卓下封面展示正常,ios下封面空白.如下图所示: 利用canvas截取视频第一帧发现,ios下截取到的第一帧一直是空白图片, 安卓正常. 后端利 ...

  9. unionId突然不能获取的踩坑记录

    昨天(2016-2-2日),突然发现系统的一个微信接口使用不了了.后来经查发现,是在网页授权获取用户基本信息的时候,unionid获取失败导致的. 在网页授权获取用户基本信息的介绍中(http://m ...

随机推荐

  1. codevs 2144 砝码称重2

    传送门 2144 砝码称重 2  时间限制: 1 s  空间限制: 16000 KB  题目等级 : 钻石 Diamond 题解   题目描述 Description 有n个砝码,现在要称一个质量为m ...

  2. 【LeetCode】312. Burst Balloons

    题目: Given n balloons, indexed from 0 to n-1. Each balloon is painted with a number on it represented ...

  3. selenium2获取input输入框中的值的三种方法。

  4. chromium浏览器开发系列第四篇:如何调试最新chromium

    接二连三的事情,时间比较紧张,但是还是没有把这个系列的文章丢掉,因为这也是对自己知识的总结吧.提倡大家多写写,以后再看的时候会有种莫名的小激动. 上周写的是chromium的目录结构,好像大家不太感兴 ...

  5. Redux API之Store

    Store Store 就是用来维持应用所有的 state 树 的一个对象. 改变 store 内 state 的惟一途径是对它 dispatch 一个action. Store 不是类.它只是有几个 ...

  6. Servlet拦截方式

    Servlet拦截方式 1.拦截固定后缀的url,比如设置为 *.do.*.action, 例如:/user/add.action 此方法最简单,不会导致静态资源(jpg,js,css)被拦截. 2. ...

  7. js中push(),pop(),unshift(),shift()的用法

    js中push(),pop(),unshift(),shift()的用法小结   1.push().pop()和unshift().shift() 这两组同为对数组的操作,并且会改变数组的本身的长度及 ...

  8. js实现星级评分之方法一

    利用一个星级评分的小案例,来逐步封装js星级评分插件. 从最基础的js知识,通过一个小的demo,逐步学习js的面向对象知识. 从浅到深,逐步递进. 图片素材 <!DOCTYPE html> ...

  9. putty连接虚拟机注意事项

    1,虚拟机ssh服务要开 2,虚拟机最好把防火墙关掉 3,虚拟机和主机的IP要在同一网段 4,大哥,putty上面那个才是要连接的远程主机IP啊!下面那个是会话名,写什么都行. 5,可以选择UTF8, ...

  10. POJ 1127 Jack Straws (线段相交)

    题意:给定一堆线段,然后有询问,问这两个线段是不是相交,并且如果间接相交也可以. 析:可以用并查集和线段相交来做,也可以用Floyd来做,相交就是一个模板题. 代码如下: #pragma commen ...