How to Set Root/Base URL for a VueJS Project

I’ve deployed a VueJS project to a domain like www.example.com, however, I want to move it to a subfolder so that I can access it like www.example.com/v1

How can I set the base URL or root URL of a VueJS project?

Note: It’s not about the base URL for Vue-resource

2 Likes

Vue-router has a base option, please see the documentation.

The rest depends on your build process. if you used vue-cli’s webpack template, you can change the path here to be /v1

1 Like

Yeah. I’ve tried that. It only changes the router-links. After building, the url’s of resource files in index.html are not starting with ‘/v1’. It always starts like ‘/static/…’

That should be handled with webpack.

How can I do that?

As @LinusBorg mentioned, if you used the webpack template via the vue-cli, then look in the config/index.js directory for the assetsPublicPath and assetsSubDirectory, and tweak as necessary. Chances are you’d want to change the `assetsPublicPath: ‘/v1’``

Look at these docs:
http://vuejs-templates.github.io/webpack/static.html
http://vuejs-templates.github.io/webpack/backend.html

3 Likes

Great! Thanks a lot :slight_smile:

Hey Gijo-Varghese

Could you solve this issue ? I am looking to solve the same

I’m having then same issue, any of you were able to solve this?

Just had the same issue.

You can edit the build config in /config/index.js.
There is a config for dev and build. In build just edit the assetsSubDirectory path:

assetsSubDirectory: 'your-subdirectoy-here/static',

src: https://stackoverflow.com/a/43880261/5910989

Hope I could help you :slight_smile:

Also had the same issue.

For those already using the vue-cli 3.0, you may need to edit the vue.config.js file, and the properties are somewhat different.
It helps to have different paths for local development and production, so the following may help someone.

module.exports = {
  // options...
  baseUrl: process.env.NODE_ENV === 'production' ? '/subpath/' : '/',

  // Other options include:
  outputDir: undefined,
  assetsDir: undefined,
  runtimeCompiler: undefined,
  productionSourceMap: undefined,
  parallel: undefined,
  css: undefined
}

Hope it helps.

I’m building an Illustrator extension and I need the paths to be relative to ./ instead of / and your advice worked perfectly! Thanks for it!