2

I created new @vue/cli 4.0.5 app and in file src/router/index.js I see :

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

I do not have any BASE_URL parameter in .env at my local and running under the localhost with command :

npm run serve

I work locally ok

I deployed the app under live server under apache(ubuntu 16) into hosting root also not using this parameter.

What is it ? Is it the same as publicPath( https://cli.vuejs.org/config/#publicPath )?

Michal Levý
  • 33,064
  • 4
  • 68
  • 86
Petro Gromovo
  • 1,755
  • 5
  • 33
  • 91

1 Answers1

4

process.env.BASE_URL is automatically injected into Webpack configuration by Vue CLI with the value specified in CLI config (vue.config.js) variable publicPath

What is it used for ?

From the docs:

The base URL your application bundle will be deployed at. This is the equivalent of webpack's output.publicPath, but Vue CLI also needs this value for other purposes, so you should always use publicPath instead of modifying webpack output.publicPath

By default, Vue CLI assumes your app will be deployed at the root of a domain, e.g. https://www.my-app.com/. If your app is deployed at a sub-path, you will need to specify that sub-path using this option. For example, if your app is deployed at https://www.foobar.com/my-app/, set publicPath to '/my-app/'

So in Webpack it is used to link to additional resources (images, fonts, code chunks when code-splitting)

The same purpose is in Vue Router because it also creates links (to other parts of your application) via <router-link>

For example with this route:

    {
      path: "/page1",
      name: "Page 1",
      component: Page1
    }

and this in your template:

<router-link to="/page1">Page 1</router-link>

If router is set to base: '/' (default), the link will be rendered as

<a href="/page1" class="">Page 1</a>

but with base: '/my-app/', the link becomes

<a href="/my-app/page1" class="">Page 1</a>

You can read more about Absolute vs relative URLs here

Community
  • 1
  • 1
Michal Levý
  • 33,064
  • 4
  • 68
  • 86
  • What is practical use if it? Like I have hosting root in '/var/www/html' and if I need to set several apps under them in separate subdirectory for any app I have in base parameter set this subdirectory? Or what ? Please, link to practical example – Petro Gromovo Dec 07 '19 at 08:31
  • 1
    @PetroGromovo I'v added more details and examples with regards to Vue Router – Michal Levý Dec 07 '19 at 10:18