鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ nuxt ssr服務(wù)器渲染報錯

nuxt ssr服務(wù)器渲染報錯

報錯內(nèi)容:
F:nuxtnuxt-appuk-uinode_modules_vue@2.5.16@vuedistvue.runtime.esm.js:587 [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.
##
直接刷新界面是不會報錯就是登錄之后跳回當(dāng)前首頁就會報這個錯。
代碼片段如下。

 //配置全局css
 css: [
 { 'src': '~/assets/css/base.scss', lang: 'scss' },
  'element-ui/lib/theme-chalk/index.css',
],
//加載
loading: { color: '#3B8070' },
 //配置實(shí)例化之前需要運(yùn)行的插件
 plugins: [
  { src: '~/plugins/config' },
  { src: '~/plugins/token' },
  { src: '~/plugins/http' },
  { src: '~/plugins/element-ui', ssr: true },
  { src: '~/plugins/swiper' },
],
 //配置應(yīng)用的源碼目錄路徑
 srcDir: 'src/',
 //配置在自動生成的 vendor.bundle.js 文件中添加一些模塊
build: {
vendor: [
  'axios',
  '~/plugins/element-ui',
  '~/plugins/swiper',
  '~/plugins/config',
  '~/plugins/crypto',
  '~/plugins/http',
  '~/plugins/token',
  '~/plugins/utils',
  '~/plugins/validate'
],

代碼處理:

 beforeMount: function() {
  var _this = this;
  var init = getSession('init');
  if (init == null || init == undefined || init == '') {
  http.get('login/is-login').then(function(res) {
    setStore('islogin', res.islogin);
    setSession('init', 1);
    if (res.islogin == 1) {
      debugger;
      var strPhone = _this.$store.state.user.phone;
      _this.isLoginNo = true;
    }
  });
} else {
  var islogin = getStore('islogin');
  if (islogin == 1) {
    debugger;
    _this.isLoginNo = true;
    var userinfo = getStore('userinfo');
    _this.$store.commit('user/SET_LOGIN');
    _this.$store.commit('user/SET_USER', userinfo);
    var strPhone = _this.$store.state.user.phone;
   }
  }
},

如果islogin == 1就是登錄狀態(tài)在本地只是報這個警告。運(yùn)行項(xiàng)目完全沒問題。但是在線上webpack打包后。登錄后就會報另一個錯誤。程序就完全崩潰了。登錄之前是好的,登錄之后報錯如下:

clipboard.png
請教大家是什么原因呢。

回答
編輯回答
拽很帥

我換成mounted這個鉤子函數(shù)就沒有報下面這個錯了。

2017年8月15日 10:32