How can remove the port number from live vue site url?

Question

while running the yarn serve I don't what to display the port no from the URL. Now, this is showing like https://example.com:8080. I want to access them from https://example.com.

vue.config.js

module.exports = {
    chainWebpack: config => {
      config.plugins.delete('prefetch');
    },
    devServer: {
        host: 'example.com',
        https: false,
        port: 8080, 
        public: 'example.com'
    }, 
}

Answer 1

The yarn serve command opens this port to serve the app locally (for testing / developing).

If you want to create your application, you probably want to run:
yarn run build

See SO - yarn build command

You can then upload the generated files. Look for a build or dist directory or similar.

You can add publicPath to your configuration:

module.exports = {
    publicPath: "./",
    chainWebpack: config => {
      config.plugins.delete('prefetch');
    },
    devServer: {
        host: 'example.com',
        https: false,
        port: 8080, 
        public: 'example.com'
    }, 
}

You can try this and see if it works.

See webpack configuration docs

Answer 2

Just open the index.html in the dist folder with live server