Let's update the VUE app's development server to point to my-testing-web-address.com instead of the default localhost:

Question

Let's update the VUE app's development server to point to my-testing-web-address.com instead of the default localhost:

I am working on a VUE application and I am trying to run it on an external link instead of localhost.

I attempted to configure a

vue.config.js

devServer: {
    host: 'http://my-testing-web-address.com',
    port: 8080,
    ...
}

and adjusted the devserver settings, but unfortunately, there were no changes reflected.

When I execute

npm run serve

It displays the following message:

App running at:
- Local:   http://localhost:8080/ 
- Network: http://192.168.0.100:8080

Is there a way to properly configure an external devserver for this VUE application?

javascript vue.js localhost webpack-dev-server devserver

Answer 1

Answer №1

{
  module.exports = {
    devServer: {
      host: 'projectname.local'
    }
  }
}

For further information, visit this link:

Answer 2

{
  module.exports = {
    devServer: {
      host: 'projectname.local'
    }
  }
}

For further information, visit this link:

Answer 3

Answer №2

To configure the host check in vue.config.js:

module.exports = {
  devServer: {
    disableHostCheck: true
  }   
}

Answer 4

To configure the host check in vue.config.js:

module.exports = {
  devServer: {
    disableHostCheck: true
  }   
}

Answer 5

Answer №3

I found that by including a comparable entry in the module.exports section of my "vue.config.js" file, I was able to resolve the issue:

devServer: {
  allowedHosts: ['(...).tunnelmole.com']
}

Answer 6

I found that by including a comparable entry in the module.exports section of my "vue.config.js" file, I was able to resolve the issue:

devServer: {
  allowedHosts: ['(...).tunnelmole.com']
}

Answer 7

Answer №4

It is important to avoid using the ending ".com" in a sample url. Instead, I suggest using your-domain.test with the conclusion of ".test"

Take a look at the correct setup below:

within vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
host: 'vue-custom-domain.test',
client: {
  webSocketURL: 'ws://vue-custom-domain.test:8080/ws',
},
  }
})

For further information visit:

Answer 8

It is important to avoid using the ending ".com" in a sample url. Instead, I suggest using your-domain.test with the conclusion of ".test"

Take a look at the correct setup below:

within vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
host: 'vue-custom-domain.test',
client: {
  webSocketURL: 'ws://vue-custom-domain.test:8080/ws',
},
  }
})

For further information visit:

Let's update the VUE app's development server to point to my-testing-web-address.com instead of the default localhost:

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Utilizing visual elements to change the options of a dropdown menu

How can I retrieve the Sequelize results in the form of a 2D array rather than an array of objects?

To convert an image file into a string, use JSON.stringify before including it in an AJAX request

Switching the default browser for npm live-server

Having trouble changing the icon in Google Maps during the event?

Displaying HTML content fetched from a database in Vue

Utilize user input to fetch data from an external API

The jQuery onchange function does not have the ability to limit the input to only

Using an AJAX post request will result in receiving an HTML element, especially when an attachment is included with Paperclip

Array Filtering with Redux

How to pass an array as parameters in an Angular HTTP GET request to an API

Is there a way to delay rendering the html until all the content has been fully downloaded?

Identifying and implementing page language in nextJS: Solving the ReferenceError "window is not defined" issue

Resource is used to return an array as an object

Where can I locate a specific child element in this scenario?

What is the best way to check for a matching array value in my menu list and apply a corresponding class tag to it?

Troubleshooting focus loss in React input fields within a Datatable component implemented in a

Switch up the Angular base URL using ngx-translate

Error: Attempting to access a property named '_updatedFibers' on an undefined object is not possible due to a TypeError

My Angular Router is creating duplicate instances of my route components