vux和vux-loader更新到latest版本之后出现：Unknown custom element: <v-no-ssr> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

[Jiiiiiin]

App.vue基本上是参考vux demo做的示例：

<template>
<div id="app">
  <vue-topprogress ref="topProgress"></vue-topprogress>
  <!-- 备选方案：参考vux文档 -->
  <!--<loading v-model="isLoading"></loading>-->

  <!-- main content -->
  <view-box ref="viewBox" body-padding-top="46px" body-padding-bottom="55px">
    <x-header class="border-1px app-header-bar" :left-options="leftOptions" :title="appTitle" @on-click-back="onHeaderBarTapBck">
    </x-header>

    <transition :name="transitionName">
      <navigation>
      <!-- <keep-alive> -->
        <router-view class="child-view"></router-view>
      <!-- </keep-alive>   -->
      </navigation>
    </transition>

    <tabbar class="vux-demo-tabbar" icon-class="vux-center" slot="bottom">
      <tabbar-item :link="{path:'/Info', replace: true}" :selected="path === '/Info'" @click.native="onHomeBarClick">
        <i class="iconfont icon-vue" slot="icon"></i>
        <span slot="label">主页</span>
      </tabbar-item>
      <tabbar-item :link="{path:'/Demo'}" :selected="isDemo" @click.native="onDemoBarClick">
        <span class="demo-icon-22" slot="icon" style="font-size:22px;line-height: 26px;">🌰</span>
        <span slot="label"><span v-if="componentName" class="vux-demo-tabbar-component">{{componentName}}</span><span v-else>栗子</span></span>
      </tabbar-item>
    </tabbar>

  </view-box>
</div>
</template>

<script type="text/ecmascript-6">
import {
  vueTopprogress
} from 'vue-top-progress'
import {
  mapState,
  mapMutations
} from 'vuex'
import {
  Loading,
  XHeader,
  Tabbar,
  TabbarItem,
  Icon,
  ViewBox
} from 'vux'

export default {
  name: 'app',
  components: {
    vueTopprogress,
    Loading,
    XHeader,
    Tabbar,
    TabbarItem,
    Icon,
    ViewBox
  },
  data() {
    return {
      transitionName: 'slide-left'
    }
  },
  computed: {
    backState() {
      return this.$store.state['pageStack'].backState
    },
    ...mapState({
      route: state => state.route,
      path: state => state.route.path
    }),
    ...mapState([
      'isLoading',
      'appTitle',
      'appTitleBarBackBtnVisible'
    ]),
    isDemo() {
      return /Components|Demo/.test(this.path)
    },
    componentName() {
      if (/Components|Demo\/./.test(this.path)) {
        return this.appTitle
      }
    },
    leftOptions() {
      return {
        showBack: !/.[/Info]./.test(this.path) || /.[/Demo]./.test(this.path),
        backText: '',
        preventGoBack: true
      }
    }
  },
  watch: {
    backState(state) {
      if (state) {
        this.transitionName = 'slide-right'
      } else {
        this.transitionName = 'slide-left'
      }
    },
    isLoading(val) {
      if (val) {
        this.$refs.topProgress.start()
      } else {
        this.$refs.topProgress.done()
      }
    },
    path(path) {
      if (/Info/.test(this.path)) {
        this.$vp.psModifyBackState(true)
      } else if (/Demo/.test(this.path)) {
        // TODO 将scroll上移
      }
    }
  },
  methods: {
    ...mapMutations([
      'updateBackStatus',
      'updateLoadingStatus'
    ]),
    onHomeBarClick() {
      if (this.backState) {
        this.transitionName = 'slide-right'
      } else {
        this.transitionName = 'slide-left'
      }
    },
    onHeaderBarTapBck() {
      this.$vp.psGoBack()
    },
    onDemoBarClick() {
      this.updateBackStatus(false)
    }
  },
  created() {
    this.$navigation.on('refresh', () => {
      this.$refs.topProgress.done()
    })
  }
}
</script>

<style lang="less" scoped>
#app {
    // 参考：https://vux.li/#/zh-CN/components?id=viewbox
    height: 100%;

    .child-view {
        width: 100%;
        top: 46px;
    }
    .slide-left-enter-active,
    .slide-left-leave-active,
    .slide-right-enter-active,
    .slide-right-leave-active {
        will-change: transform;
        transition: all 500ms;
        height: 100%;
        top: 46px;
        position: absolute;
        backface-visibility: hidden;
        perspective: 1000;
    }
    .slide-right-enter {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    .slide-right-leave-active {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    .slide-left-enter {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    .slide-left-leave-active {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    .vux-header {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 100;
    }

    .iconfont {
        color: rgb(77,49,74);
    }
}
</style>

查看报错的位置： 确实木有声明。

@airyland

[airyland]

该组件会被 vux-loader 解析。.$t 也没有处理，说明并没有正确配置 vux-loader。请直接使用模板创建。

[Jiiiiiin]

@airyland

更新到最新版本的vux-loader出现，下面是我直接使用vux templ更新到最新版本之后出现的：

  "dependencies": {
    "fastclick": "^1.0.6",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1",
    "vuex-i18n": "^1.10.5",
    "vux": "^2.7.8"
  },
"devDependencies": {
    "vue-loader": "^14.1.1",
    "vue-style-loader": "^3.1.2",
    "vue-template-compiler": "^2.5.2",
    "vux-loader": "^1.1.31",

用了这么久，vux-loader配置应该是没有问题的。 vue-loader和vux-loader的搞基，每次都不如很顺利。

[airyland]

vue-loader@14 变更导致的，升级 vux-loader 到最新。

[Jiiiiiin]

@airyland thx 👍

[Jiiiiiin]

可以了。