Vuepress: Unable to serve the site correctly after adding a base

[HanchengZhao]

• Your OS : macOS 10.13.2
• Node.js version : v10.0.0
• VuePress version: 0.8.4
• Browser version: Version 66.0.3359.117
• Is this a global or local install? global
• Which package manager did you use for the install? yarn

I added a base in config.js file, base: '/docs/', then ran vuepress build, but could only see the site in a bare minimum html content without correct styles and redirections after running serve -p 80 -s .vuepress/dist

I checked dist folder, all the hrefs have /docs/ before it, but the file structure is still

+-- assets
    +-- css
    +-- img
    +-- js
+-- index.html

I wonder if it is the issue with reference? However, vuepress dev works fine, is there any way to solve it or I should expect a different behavior?

[meteorlxy]

You might misunderstand what the base is for.

Have your ever served docs of a project by github pages?

For example, https://meteorlxy.github.io/vue-bs-pagination
Then the base is /vue-bs-pagination/, but the directory structure is still like what you mentioned above.

[HanchengZhao]

@meteorlxy From my understanding, base is used for hosting docs under a subdomain, since I need to serve the site in a docker container and this container will be accessed through domainURL/docs/, so I need a way to serve the static site locally on localhost:8080/docs/

[meteorlxy]

OK, let's take nginx and your docker container for example.

Nginx serves on localhost:8080, with a reverse proxy config like:

server {
  listen 8080;
  server_name localhost;
  location /docs/ {
    proxy_pass http://your-docker-container/;
  }
}

In your docker container, run serve -p 80 -s .vuepress/dist as you mentioned.

Without setting base, the assets will be referenced by /assets/css/... and won't be proxied into your docker container.

With the help of base: '/docs/', assets' link will be /docs/assets/css/.... So it will use /docs/ to proxy into your container first, and then use assets/css/.. to locate the files in your container.

[HanchengZhao]

@meteorlxy Thanks for explaining, I think I understand this part, but it still doesn't work for me. I think you can reproduce it by doing this:

• git clone https://github.com/vuejs/vuepress.git
• add a base to vuepress/docs/.vuepress/config.js, such as base: '/docs/'
• yarn build
• serve -p 80 -s vuepress
• go to localhost:80/docs/

For me, I can only see the bare html elements on the page

[ulivz]

As @meteorlxy said, you might understand what the base is, but you don't know how to make it work.

FYI:

• In development, we are not using a static server!!! and we pass base to the vue-router's initialized config so it works fine;

• In production, you will need a static server with correct config! and base option will be used as publicPath, there is the doc for you: https://webpack.js.org/guides/public-path

[ulivz]

If you want to make it work at local, you can try:

1. set dest to vuepress/docs, then run build;
2. create a empty index.html at vuepress/
3. serve -p 80 -s vuepress
4. go to localhost:80/docs/

Hmmm .... it's not production 🤔.

[yyx990803]

base: '/docs/' means your dist folder should be served at localhost:xxxx/docs/, not locahost:xxxx/.

[HanchengZhao]

Thank you all for such quick and informative responses, problem solved. For later users reference, remember to match urls with folder path

[pascalandy]

@HanchengZhao do you use docker container to build you Vuepress project as well?
I would be curious to start exploring with it :)

[HanchengZhao]

@pascalandy Yes, all you need to do is to vuepress build and serve the static files inside dockerfile