Theme error building a site and sometimes even showing VuePress site

[GustavoMarcante]

Bug report

Version

0.10.1

Steps to reproduce

I followed the instructions at https://vuepress.vuejs.org/guide/getting-started.html#global-installation:

yarn global add vuepress
echo '# Hello VuePress' > README.md
vuepress build

I also installed using npm and the same error happened.

What is expected?

A VuePress page with theme.

What is actually happening?

The (tiny) content was shown in a buggy theme,
with three black rectangles first and then the content without formatting,
as show at:
VuePress.pdf

Other relevant information

In a certain moment, even the VuePress site loaded with the same error in my Ubuntu Desktop
(it did not happened in my Android cell phone).
I tried in two Ubuntu desktops, with 16.04 and 18.04.
If it is not a bug, but a installation error, at least the instructions could be cleaner, avoiding this error.

• OS: Ubuntu Linux 18.04 and 16.04 (two different desktops)
• Node.js version: 8.11.2
• Browser version: Both Firefox Quantum 60.0.2 and Google Chrome 67.0.3396.79 64 bits
• It is a global install
• Package manager for the install: Both npm and yarn

[GustavoMarcante]

The same display error, showing VuePress site https://vuepress.vuejs.org, was reported in #583, using Mac.
So I will edit the title.

[GustavoMarcante]

The three black rectangles comes from the tag in "sidebar-button" div.

[bobaekang]

I am having the precisely same issue here on a Windows machine, where vuepress dev gives me the expected page with correct formatting while the rendered static page from vuepress build does not. I tried both VuePress v0.12.0 and v0.13.1 (global install) and got the same result.

• OS: Windows 10
• Node: v8.9.3
• Chrome: v68.0.3440.84 (Official Build) (64-bit)
• Package manager: NPM

I also get the following warning message each time I try building: DeprecationWarning: Tapable.plugin is deprecated. Use new API on.hooks instead. I wonder if this is relevant.

I tried to delete all the service workers from other sites as suggested in #583 but the problem remains unresolved.

[bobaekang]

@GustavoMarcante ,

I might have found a "solution" to this issue. While watching Evan You's VueNYC talk/demo video on Youtube, I noticed that he actually does not try to open the generated html files. Instead, he served the site via anywhere node package.

I've tried this method myself, and the Vuepress site is rendered as expected! It doesn't really take more than installing anywhere, which takes only a second, so you might want to give it a try.

[GustavoMarcante]

Great, @bobaekang, it worked for me!
Thanks for sharing this solution!
My suggestion is to include this (or another related solution) in the instructions, as, in my point of view, it is not obvious, especially for those unfamiliar with Vue (one of the targets of VuePress).

[ulivz]

"Why can't open the files that VuePress build directly? "

This's question that's not very easy to explain. and this is not an issue from VuePress, but from html-webpack-plugin.

First, VuePress is based on webpack, In VuePress, the default publicPath(i.e base in VuePress) is /, which causes all the assets to bring the starting slash. e.g.

<script type="text/javascript" src="/assets/js/app.9687e57b.js"></script>

instead of:

<script type="text/javascript" src="assets/js/app.9687e57b.js"></script>

So you cannot open it in local directly.

publicPath

It allows you to specify the base path for all the assets within your application.

So if you deploy your site to a non-root URL, it's a very useful feature - your source code will only need to maintain the relative path.

Preview a root-URL site at local.

To preview it in local, you need a a static server. http-server or anywhere, or others.

$ brew install http-server
$ http-server

Preview non-root-URL site at local.

Since the most of the local static servers does not provide the mount function, we cannot serve it directly. but If you are familiar with how static servers work, you'll know there is a simple hack.

e.g. you base is set to '/sub/', you need:

1. Set your dest to sub.
2. Run http-server in the root docs dir.
3. Open http://127.0.0.1:8084/sub/

Conclusion

Let's use a static server instead of opening the files directly, that is simple and consistent with the behavior of the production environment.

References

• Webpack > publicPath
• VuePress > Base URL
• No starting slash '/' when using webpack 2 jantimon/html-webpack-plugin#635
• Adds slash to beginning of JS files injected but not CSS files jantimon/html-webpack-plugin#930

[Infinite-Actuary]

Just curious, if we have to serve the contents of /dist from a server as opposed to viewing them from the file system (i.g. open index.html with Firefox). Then we won't really be able to host the static content on Github pages, correct?

For example, I copied the content of /dist and put it on my gh-pages branch:
https://infinite-actuary.github.io/Econ-417-McGarvey

and it doesn't have proper styling.

EDIT: After adding base: '/<REPO>/' to my config.js and following this documentation: https://vuepress.vuejs.org/guide/deploy.html#github-pages I was able to get it to work.

[daisybaicai]

Maybe you write the base and you don't need it.
I have the same problem when I push it to the github and build.
When I delete the base 'xx' in config.js, I have Solve this problem and get the correct style.