vuepress

vuepress copied to clipboard

我参考了一些issue，#1328，用上面的方式无法解决该问题，希望大神指点一下

我自己编写了一个组件包sf-view-vue，该组件包内置了接口方法，如下面代码所示：

// 获得小区 楼栋详情
export function getAoipoiDetailInfo(query) {
    if (window) {
        return globalApi.axios({
            url: `${globalApi.oldBaseUrl}/standardAddress/getAddrDetail`,
            method: 'get',
            params: query,
        })
    }
}

在调用该组件包时，需将上面对应的全局参数传入

import { axios } from './utils/request';

window.globalApi = Object.freeze({
   axios,
   oldBaseUrl: "//10.82.232.213:8083"
});

在vuepress文档系统内，组件vue代码如下所示：

<template>
  <div>
    <SearchBox v-if="searchComponentsEnable" address="百瑞景中央生活区3期" style="left:700px;top:2140px;"></SearchBox>
  </div>
</template>

<script>
import { SearchBox } from 'sf-view-vue';
import { mapGetters } from 'vuex';
import { axios } from './utils/request';

export default {
	computed: {
  		...mapGetters([
    		'searchComponentsEnable' // 控制搜索控件是否显示，状态已在组件包内定义完成
		  ])
	},
	components: {
		SearchBox
	},
	provide() {
		return {
			hasBussiness: false, // tab页签去掉商业
			city: '武汉',
		};
	},
	beforeCreate() {
		this.$store.commit('SET_ADCODE', 420100);
	},
	mounted() {
		window.globalApi = Object.freeze({
			axios,
			oldBaseUrl: "//10.82.232.213:8083"
		});
	}
}
</script>
<style lang="less">
	@import "~sf-view-vue/src/styles/index.less";

    @tips-bg:rgba(18,18,18,0.8); // 搜索提示的背景颜色
    @inner-bg:rgba(18,18,18,.9); // 深度信息的背景颜色
    @input-bg:rgba(68,68,68,0.8); // 搜索框的背景颜色

    @tabWidth:33.33%;
</style>

enhanceApp.js的代码如下所示：

import Vue from 'vue'
import Vuex from 'vuex';
import { SFViewGetters, SFViewModules } from 'sf-view-vue';

export default ({
    Vue
}) => {
    Vue.use(Vuex);
    const store = new Vuex.Store({
        modules: {...SFViewModules},
        getters: {...SFViewGetters}
    });
    Vue.prototype.$EventBus = new Vue();
    Vue.mixin({store: store})
};

vuepress dev都是正常的，但一旦vuepress build便会抛出

server-bundle.js:63963
    if (window) {
    ^

ReferenceError: window is not defined
    at searchAddressData (server-bundle.js:63963:5)
    at VueComponent.<anonymous> (server-bundle.js:64106:7)
    at Timeout.later [as _onTimeout] (server-bundle.js:63860:23)
    at ontimeout (timers.js:436:11)
    at tryOnTimeout (timers.js:300:5)
    at listOnTimeout (timers.js:263:5)
    at Timer.processTimers (timers.js:223:10)

tks a lot, I find a solution #issue 1718

Using this, I can solve my problem

import "xxx/lib/index.css"
export default ({
  Vue, // VuePress 正在使用的 Vue 构造函数
  options, // 附加到根实例的一些选项
  router, // 当前应用的路由实例
  siteData, // 站点元数据
  isServer // 当前应用配置是处于 服务端渲染 或 客户端
}) => {
  if(!isServer){
    import('xxx/lib/xxxx.min.js').then(module => {
      Vue.use(module)
    })    
  }
}

将组件内import 放在mounted 中引入 enhanceApp.js 中 使用类似方法导入 ` export default ({ Vue, options, router, siteData, isServer }) => { if (!isServer) { import('element-ui').then((module) => { Vue.use(module) }); import('@zhoujianxu/e_ui/src/index.js').then((module) => { Vue.use(module.default) });

    import('element-ui/lib/theme-chalk/index.css')
}


    // Vue.use(Eui);
    // Vue.use(Element);

} `