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

看官方文档安装项目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. javacpp-FFmpeg系列之3: 像素图像数据转换(BGR与BufferdImage互转,RGB与BufferdImage互转,BufferdImage转Base64编码)

    javacpp-ffmpeg系列: javacpp-FFmpeg系列之1:视频拉流解码成YUVJ420P,并保存为jpg图片 javacpp-FFmpeg系列之2:通用拉流解码器,支持视频拉流解码并转 ...

  2. ubuntu_deb安装命令

    dpkg命令常用格式如下: sudo dpkg -I iptux.deb#查看iptux.deb软件包的详细信息,包括软件名称.版本以及大小等(其中-I等价于--info) sudo dpkg -c ...

  3. Behave + Selenium(Python)一:

    Behave 介绍:(来自T先生) 最近一个项目用了behave来做测试,因为之前没有接触过,所以写下最近的心得总结. 做自动化的人估计对selenium已经不是很陌生了,但是对于Behave工具,估 ...

  4. 将eclipse java程序打包成jar的总结(包括工程中没有引用外部jar包和有引用外部jar包两种情况)

    一.当eclispe java工程中没有引用外部jar包时: 选中工程---->右键,Export...--->Java--->JAR file--->next-->填写 ...

  5. WPF访问UserControl的自定义属性和事件

    要实现外部窗体能直接访问UserControl的属性必须把UserControl的属性定义为依赖属性: 一,在UserControl.cs中为TextBox控件的Text建立依赖属性,输入" ...

  6. day9http协议

    Http协议入门 2.1 什么是http协议 http协议: 对浏览器客户端 和  服务器端 之间数据传输的格式规范 2.2 查看http协议的工具 1)使用火狐的firebug插件(右键->f ...

  7. 日期组件wdatepicker

    导入WdataPicker文件包到项目的js文件夹下: 在用户管理中的添加.编辑jsp页面对生日表单项引入日期组件: <script type="text/javascript&quo ...

  8. Python中的数据结构和算法

    一.算法 1.算法的时间复杂度 大 O 记法,是描述算法复杂度的符号O(1) 常数复杂度,最快速的算法. 取数组第 1000000 个元素 字典和集合的存取都是 O(1) 数组的存取是 O(1) O( ...

  9. 使用BIND安装智能DNS服务器(三)---添加view和acl配置

    智能DNS的配置主要修改named.conf文件,利用view和acl来实现. acl文件内容,这里只列出一部分,具体详细的可以参考这个网址 纯真IP库,给出了十分详细的IP地址,下载安装后,打开软件 ...

  10. shell程序---编译目录下全部.c或.cpp文件

    今天大波又提起昨天我说的那个程序.这样的,起初我想写一个makefile,每次写完新代码后一键编译目录下所有的.cpp文件. 原因是用makefile的话,每次要把目标文件加紧去才能编译.感觉不方便. ...