nuxt项目踩坑
1、window or document is not undefined
// .vue 页面
if (process.browser) {
var Distpicker = require('v-distpicker')
Vue.use(Distpicker)
Vue.component('v-distpicker', Distpicker)
} // nuxt.config.js
build: {
vendor: ['v-distpicker']
}
这样会报错:[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
修改.vue页面引入
<no-ssr><v-distpicker :placeholders="form.placeholders"></v-distpicker></no-ssr>
2、vee-validate本地化
按照官网的本地化各种报错:另外需要注意的是部分文件/配置修改需要重启服务
//页面内
const dictionary = {
zh_CN: {
custom:{
lender:{
type:{
required: () => '类型不能为空'
}
}
},
messages: {
lender: {
code: () => 'ssss',
}
},
attributes: {
lender: {
code: '资方编码'
}
}
}
}; Validator.localize(dictionary); //vue
<p>
<input v-validate="'required|sss'" name="sss" type="text" placeholder="sss">
<span v-show="errors.has('sss')">{{ errors.first('sss') }}</span>
</p> //公用
Validator.extend('sss', {
getMessage: field => field + '必须是一个手机号.',
validate: value => {return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)}
}); //按钮触发
onSubmit() {
this.$validator.validateAll().then((result) => {
if (result) {
console.log('ok?')
return;
}
console.log('咋啦');
});
}
// /plugs/vee-validate.js本地化配置
import Vue from 'vue'
import VeeValidate,{Validator} from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN';
import VueI18n from 'vue-i18n'; Vue.use(VueI18n); const i18n = new VueI18n({
locale: 'zh_CN'
}); Vue.use(VeeValidate, {
i18n,
fieldsBagName: 'field',
dictionary: {
zh_CN: {
messages: {
email: () => '请输入正确的邮箱格式,哼哼哼哼哼',
required: (field) => "请输入" + field
},
attributes: {
// email:'邮箱有毒吗',
password: '密码',
name: '账号',
phone: '手机',
lender: {
code: '资方编码'
}
}
}
}
});
##### 常规上线步骤
* npm run build编译后将文件传至服务器ssh root@111.11.11.111
* 服务器目录为/home/nuxt (需要上传的未见为package.json和.nuxt文件)
* 安装好node(推荐nvm)和 yarn,npm i --production 或者yarn i --production 安装好后运行npm run start启动服务
* 需要配置好nginx(ubuntu下的配置为:/etc/nginx/nginx.conf查看内容可以看到底部引入
include/etc/nginx/conf.d/*.conf;
include/etc/nginx/sites-enabled/*;
进入sites-enabled目录下配置nginx的sercer代理即可
)
## 使用docker快速开始
- 首先,需要访问[docker官网](https://www.docker.com/)根据不同操作系统获取docker
- docker官方文档:https://docs.docker.com/
- mongo dockerhub文档:https://hub.docker.com/_/mongo/ (关于auth/volumes一些问题)
``` bash
# development mode(use volumes for test-edit-reload cycle)
# 开发模式(使用挂载同步容器和用户主机上的文件以便于开发)
# Build or rebuild services
docker-compose build
# Create and start containers
docker-compose up
# production mode
# 生产模式
# Build or rebuild services
docker-compose -f docker-compose.prod.yml build
# Create and start containers
docker-compose -f docker-compose.prod.yml up
# 进入容器开启交互式终端
# (xxx指代容器名或者容器ID,可由`docker ps`查看)
docker exec -it xxx bash
```
> 注:为了防止生产环境数据库被改写,生产模式数据库与开发环境数据库的链接不同,开发环境使用vue-blog,生产环境使用vue-blog-prod,具体可以看docker-compose配置文件
https://github.com/BUPT-HJM/vue-blog
vue 遍历赋值属性节点(转义),这点卡了很久
:name="`form.contactsList${scope.row.index}.date`"
nuxt项目踩坑的更多相关文章
- 首个hybird商业项目踩坑总结
该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列.该系列引用了<Android开发艺术探索>以及<深入理解And ...
- Nuxt.js 踩坑记录,(1)引入fs包报错
今天又是码农的一天. 但是写着写着,不知道为啥就页面就报错了, 如图所示,我在db/app.js下引入了fs这个模块,提示我npm install,我也照做了,但是仍然报错. 通过各种百度,踩坑,最终 ...
- electron项目踩坑--A JavaScript error occurred in the main process:document is not defined
前言 记录electron-vue项目开发中遇到的一个错误,运行时报错如图: 控制台报错如下: ReferenceError: document is not defined at Object.&l ...
- html2canvas在Vue项目踩坑-生成图片偏移不完整
背景 最近做一个Vue项目需求是用户长按保存图片,页面的数据是根据不同id动态生成的,页面渲染完生成内容图片让用户长按保存的时候,把整个页面都保存起来. 在项目遇到的坑是图片能生成,可是生成的图片总是 ...
- Nuxt.js 踩坑笔记 - 缓存向
零.前言 最近参与了一个立足 seo 的移动端项目,公司前端工程主栈 vue,所以理所当然的用上了 nuxt,UI 主要选择了 Vant. 一.公共列表页的缓存 公共列表页由于数据量较大,故需要滚 ...
- Nuxt.js 踩坑记录(2) 使用sequelize时,提示install mysql2,安装了仍然不能解决问题
打算写一个nuxt.js+sequelize+mysql的个人博客,遇到了挺多坑,还是坚持了下来,终于解决了这个bug. 今天不知道我做了什么,页面就报错了,定位到了使用sequelize的JS文件里 ...
- Vue(项目踩坑)_解决vue中axios请求跨域的问题
一.前言 今天在做项目的时候发现axios不能请求跨域接口 二.主要内容 1.之前直接用get方式请求聚合数据里的接口报错如下 2.当前请求的代码 3.解决方法 (1)在项目目录中依次找到:confi ...
- nuxt.js踩坑之 - SSR 与 CSR 显示不一致问题
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This ...
- mpvue微信小程序项目踩坑记录
1.mpvue入门教程, http://mpvue.com/mpvue/quickstart.html # . 先检查下 Node.js 是否安装成功 $ node -v v8.9.0 $ npm - ...
随机推荐
- 升级gitlab
https://gitlab.com/gitlab-org/gitlab-ce/tree/master/doc/update https://about.gitlab.com/update/#cent ...
- GitHub中开启二次验证Two-factor authentication,如何在命令行下更新和上传代码
最近在使用GitHub管理代码,在git命令行管理代码时候遇到一些问题.如果开起了二次验证(Two-factor authentication两个要素认证),命令行会一直提示输入用户名和密码.查找了一 ...
- 关于Frame加背景的那点事?
最近新生问我一个问题,继承自Frame(可不是继承自JFrame)的框架怎样添加背景图片, 真够坑的,当时还真懵了,废话少说直接上代码: import java.awt.*; import java. ...
- linux 命令:tr 的简单使用
工作的需要,用到了tr命令,因为用到的次数不是很多,怕以后忘记了百度,就自己总结下.例子什么的,copy linux shell 脚本攻略这本书. tr:常用选项 -c 用字符串1中字符集的补集替换此 ...
- Mysql的锁机制与PHP文件锁处理高并发简单思路
以购买商品举例: ① 从数据库获取库存的数量. ② 检查一下库存的数量是否充足. ③ 库存的数量减去买家购买的数量(以每个用户购买一个为例). ④ 最后完成购买. 仅仅这几行逻辑代码在并发的情况下会出 ...
- Qt 如何使用 lambda 表达式连接信号和槽?
connect(camera, static_cast<void(QCamera::*)(QCamera::LockStatus, QCamera::LockChangeReason)>( ...
- POJ - 2253 Frogger 单源最短路
题意:给定n个点的坐标,问从第一个点到第二个点的最小跳跃范围.d(i)表示从第一个点到达第i个点的最小跳跃范围. AC代码 #include <cstdio> #include <c ...
- 试着简单易懂记录synchronized this object Class的区别,模拟ConcurrentHashMap
修饰静态方法默认获取当前class的锁,同步方法没有释放的锁,不影响class其他非同步方法的调用,也不影响不同锁的同步方法,更不影响使用class的其他属性. package thread.base ...
- python高阶函数式编程
from functools import reduce def str2int(s): def fn(x, y): return x * 10 + y def char2num(s): return ...
- python中 字符 字典 列表之间的转换
1 字典 转 字符 定义一个字典:dict = {'name': 'python', 'age': 7}字典转字符 可以使用str强制转换 如: str(dict) 此时dict的类型就是字符型了 2 ...