nuxt项目踩坑

Posted 2020-10-27 落暮

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