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

Encountering a problem when verifying if the data is in JSON format using JavaScript

The issue of object being undefined during attribute binding in Vue Lifecycle

Search through an array of objects and assign a new value

Designing a query feature to explore a Sequel Database utilizing a 'RETRIEVE' approach

Vue Storefront consistently displays errors when attempting to showcase products

Difficulty in accurately retrieving the value in a PHP echo statement using jQuery

What is the best method for activating a function with @click within an infowindow on Google Maps in Vue.js?

Merge arrays to form nested structures

Error message encountered when submitting a form after receiving an AJAX response: VerifyCsrfToken Exception

What could be the reason why my JavaScript code for adding a class to hide an image is not functioning properly?

Utilizing jQuery in Wordpress to Toggle Content Visibility

Performing a cross-domain JSON Get request with JQuery

Display a loading screen while retrieving information in React Redux

How can I adjust the border width of outlined buttons in material-ui?

Positioning the comments box on Facebook platform allows users to

Are you experiencing issues with your Ajax request?

Prevent certain dates from being selected in a designated input field

A simple guide on passing a variable from Node.js to the view

Tips for Interacting with an API using curl -X Command in Vue

How to utilize FileReader for parsing a JSON document?