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 [email protected]
* 服务器目录为/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`"