VUE app change dev server from localhost:8080 to my-testing-web-address.com

Question

I have a VUE application and I need to run it on an external link not on localhost.

I tried to create a

vue.config.js

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

and set the devserver, but still no changes

when I run

npm run serve

It says

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

It's any way to set up an external devserver?

Answer 1

In vue.config.js:

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

Answer 2

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

Full details here: https://stevencotterill.com/snippets/vue-cli-using-a-custom-domain

Answer 3

For me adding the similar entry to module.exports in "vue.config.js" helped:

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

Answer 4

Never use the ending ".com" in a test urlI recommend using your-domain.test with the ending ".test"

See the correct configuration, how it should look:

into 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',
},
  }
})

More info in: https://www.conteudopertinente.com.br/vue3/vue-change-url-from-localhost8080-to-custom-domain/