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`"