vuepress build docs Error

[Pearyman]

• [ ] I confirm that this is a issue rather than a question.

Bug report

Version

• 0.14.9
  

  Steps to reproduce

vuepress build docs

What is expected?

What is actually happening?

Other relevant information

• Your OS: Mac OS
• Node.js version: v11.2.0
• Browser version: chrome 72.0.3626.109
• Is this a global or local install? global install
• Which package manager did you use for the install? npm

Please help me with a look

[Shigma]

Have a look at this documentation.

Your project has a dependency particles.js, which cannot run directly without a browser environment.

[Pearyman]

@Shigma 方便具体一点么？

我只是在enhanceApp.js 文件里面全局挂载了Vue vue-highlight.js element-ui 这几个组件

import Vue from 'vue'
import VueHighlightJS from 'vue-highlight.js'
import 'highlight.js/styles/atom-one-dark.css'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '../.vuepress/public/css/index.css'

export default ({
  Vue, 
  options, 
  router, 
  siteData
}) => {
  Vue.use(VueHighlightJS)
  Vue.use(Element)
}

然后Build的时候 ，就爆出 ReferenceError: window is not defined。

[Shigma]

你的代码中使用到了库 vue-particles，这个库依赖于 particles.js，而后者的运行又依赖于浏览器环境。（不信的话你可以在 Node 环境中单独 require 一下那个库试试~）根据浏览器的 API 访问限制，这样的代码是无法 build 的。

[Pearyman]

@Shigma 从哪里看到我使用 vue-particles 的？ 没有使用啊

项目 node_modules 截图

[Shigma]

非常不好意思……我以为你说的是 #1129。

然而你说的 element-ui 貌似存在同样的问题。一般来说报 window is not defined 错都是由于依赖的某个库不被 Node 环境所支持导致的。

[Pearyman]

Looks like I know what the problem is.

Very sorry for taking your time .

[Shigma]

Ummmm I think you might misunderstand me.

Some vuepress plugins actually need a browser environment, which is the reason for the error you encounted:

require('element-ui') // Error: window is not defined

So if a module cannot be "required" directly from Node, it cannot be used in vuepress, unless it is imported in the mounted hook like this:

export default {
  mounted() {
    import('element-ui').then(/* things to do next */)
  }
}

[1Crazy]

@Pearyman 你的问题和我当时遇到的一样，当时我是想全局引入一个vueparticle的组件，你是想找vuepress的入口文件哇，想全局引入组件是吧，建议你使用vuepress1.x的文档，看这篇教程
https://vuepress.vuejs.org/zh/guide/custom-themes.html#%E5%BA%94%E7%94%A8%E9%85%8D%E7%BD%AE

import Vue from 'vue';
import AppTest from './components/AppTest';

export default (({
  Vue
}) => {
  Vue.use(AppTest)
});

[Pearyman]

@1Crazy Emmmmm 我是写了一个组件库 然后想用Vuepress做个文档 发现全局引入我写的这个组件库 怎么都挂载不上

dev环境是可以的 build 是不行的

[1Crazy]

@Pearyman 你和我遇到的问题是一样的，建议看这篇文档，1.x的文档，1.x的文档有一个主入口文件，你把这个文件命名为enhanceApp.js就好了，记住用1.x的文档，下面是连接：https://vuepress.vuejs.org/zh/guide/custom-themes.html#%E8%8E%B7%E5%8F%96%E6%B8%B2%E6%9F%93%E5%86%85%E5%AE%B9

[Pearyman]

import Vue from 'vue'
import VueHighlightJS from 'vue-highlight.js'
import 'highlight.js/styles/atom-one-dark.css'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '../.vuepress/public/css/index.css'
import mymodule from 'mymodule'
export default ({
  Vue, 
  options, 
  router, 
  siteData
}) => {
  Vue.use(VueHighlightJS)
  Vue.use(Element)
  Vue.use(mymodule)
}

我用的是 0.14.x的版本 ，不清楚为啥 element-ui这么使用可以全局挂载上，而我自己的组件库就挂载不上。然后Build的时候 ，就爆出 ReferenceError: window is not defined。

[1Crazy]

@Pearyman 这个建议你用1.x的版本，0.x版本我当时也不行，0.x估计应该是底层代码的问题

[Pearyman]

Having found another way ，it was solved.

import Vue from 'vue'
import VueHighlightJS from 'vue-highlight.js'
import 'highlight.js/styles/atom-one-dark.css'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '../.vuepress/public/css/index.css'
import {MyComponent} from 'mymodule/packages/MyComponent'
export default ({
  Vue, 
  options, 
  router, 
  siteData
}) => {
  Vue.use(VueHighlightJS)
  Vue.use(Element)
  Vue.component('MyComponent',MyComponent)
}

it works for me when i run vuepress build

[1Crazy]

666

[xxholly32]

element-ui里面有个代码是

var root = window

去掉就好了，不知道是不是window不能赋值

popper.js

[1Crazy]

666

[ulivz]

@xxholly32 I recommend that you create a PR to element-ui to fix it, obviously it's SSR unfriendly.

[leafiy]

如果在directive中使用了window，无法使用client-only解决

[grasilife]

Having found another way ，it was solved.

import Vue from 'vue'
import VueHighlightJS from 'vue-highlight.js'
import 'highlight.js/styles/atom-one-dark.css'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '../.vuepress/public/css/index.css'
import {MyComponent} from 'mymodule/packages/MyComponent'
export default ({
  Vue, 
  options, 
  router, 
  siteData
}) => {
  Vue.use(VueHighlightJS)
  Vue.use(Element)
  Vue.component('MyComponent',MyComponent)
}

it works for me when i run vuepress build

这个你最终的解决方案是什么?