CODEWITHSUNDEEP
vuejs2vue-routervue-resource
GroovyP
GroovyP

Reputation: 808

Support 2 base URL's in Vue

Is it possible to support 2 base URL's, /test/app and /app with the Vue router? The http requests also have to use the updated path for API calls.

Maybe it's possible to do this with aliases in vue router. But this doesn't solve the API call problem for vue resource. And this would mean I have to create 2 paths for every page.

Upvotes: 1

Views: 1875

Answers (1)

K3TH3R
K3TH3R

Reputation: 759

First and foremost, just so that you're aware, Vue-Resource has been deprecated from official recommendation status because they don't perceive Ajax as a functionality that requires deep integration with the Vue ecosystem.

Now, to the larger question. It sounds like you're trying to use different urls based on which environment you're in (ie. local development vs. production). The easiest way to do this would be to go to the file where you define your Vue-Resource root url and add the following:

var isProduction = process.env.NODE_ENV === 'production'
var rootUrl = (isProduction) ? 'http://production.domain/api' : 'http://localhost:8080/api'
Vue.http.options.root = rootUrl;

This code basically tests if you're in production and, if you are, assigns the production domain api to the variable, otherwise it assigns the local development domain api.

[EDIT] I took for granted that you would be using the Vue-CLI which sets this up for you. If you are using NPM to start your Vue server, you're probably running a command like npm run dev, which references this line in your package.json:

{
// ...
     "scripts": {
         "dev": "node build/dev-server.js",
// ...
}

You can change that "dev" line to something like this:

{
// ...
     "scripts": {
         "dev": "NODE_ENV=dev node build/dev-server.js",
// ...
}

And that will create the NODE_ENV variable with your Node script which should allow you to use it now within the Vue context.

Upvotes: 1

Related Questions