In the production environment: TypeError: Cannot read property '$options' of undefined

[ItsRyanWu]

Bug report

(picture 1 in development enviroment)

(picture 2 in production environment)

My custom VuePress template works well in the development environment (picture 1)
But it cannot show the <router-view> part after I build it and make it run on Github pages. (picture 2)

You can see in the right part of picture 2 it says that 'TypeError: Cannot read property '$options' of undefined' after I click any <router-link> item in the navbar.

Version

VuePress 0.12.0
Vue 2.5.16

Steps to reproduce

My gh-pages website is: https://zeyun.me
The repo of the website is: https://github.com/RyanWuuu/RyanWuuu.github.io

What is expected?

can run without error in the production mode

What is actually happening?

cannot run in the production mode but can in the development mode

Other relevant information

• Your OS: macOS
• Node.js version: v9.5.0
• Browser version: Chrome Dev Version 69.0.3497.12
• Is this a global or local install? local
• Which package manager did you use for the install? npm

[ulivz]

Hmmm .... Vue 3.0.0-rc.5 ? ? ? ?

I guess what you said should be vue-cli.

[ItsRyanWu]

@ulivz You are right and I have corrected this mistake. BTW my Vue.js version is 2.5.16.

[ItsRyanWu]

@ulivz Ok, I just found the reason. I didn't realize that the Layout.vue is already a Router-view part and I originally wanted to nest a custom Router-view in the Layout Router-view. That doesn't make sense. So thank you for your patience!
谢谢大佬，我还需要继续学习。[惭愧状～]

[ItsRyanWu]

@ulivz But hold on, in this section of the VuePress docs, there is a router parameter for application configuration, would you please explain how it works? This section of docs is too abstract, I have no examples to imitate.Thank you!

[meteorlxy]

@RyanWuuu

I will encourage you to read the source code of Vuepress, which is not so complicated.

For now, the router parameter is more like a readonly parameter.

See #160 for a possible usage (which may not work though 😅 ).

[ItsRyanWu]

@meteorlxy Thank you, nice guy~

[Kylinyu]

@ItsRyanWu
I still cannot figure out how you solved this problem😢

[ItsRyanWu]

@Kylinyu
My solution is that do not use vue-router in your VuePress project, if you wanna mount different component with the different link, just make some conditional rendering using v-if or v-show according to $route.path.
The final effect can be seen on my blog: https://zeyun.me