vue project starts to run the Local address 5173 page generation, to click to use any function will report an error, how to solve?(Key words -Network)

This answer quotes ChatGPT
This problem may be due to port 5173 being occupied while your Vue project is starting. If you set up a local back-end service or another application uses the port, the port will not be available for the Vue project, resulting in an error.

There are two solutions:

Find the application using the port and stop it so that your Vue project can use the port.
When your Vue project starts, use another port(such as 5174).
If you can't find the application that is using the port, try typing netstat -ano on the command line. This will show you all the processes that are using the port, then find the process by its process ID and stop it.

If you are using Vue CLI 3, you can change the port on which the project runs by setting the port parameter in the scripts section of the package.json file. For example

"scripts": {
  "serve": "vue-cli-service serve --port 5174"
},

the reference answer GPT ᴼ ᴾ ᴱ ᴺ ᴬ ᴵ < br / > this situation may be caused by cross domain problem. In browsers, in order to keep the site secure, there are same-origin policy restrictions that do not allow cross-domain requests for data via XMLHttpRequest or Fetch, etc., that is, if your front end code is running on one port and your back end code is running on another, you will have cross-domain problems.
-
You can solve cross-domain problems in either of the following ways:
1. Add CORS header information to back-end service

Add CORS header information to the back-end service to allow requests from other sources. For example, with the Node.js and Express frameworks, you could set this:

const express = require('express');
const app = express();

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

In the above code, Access-Control-Allow-Origin allows requests from all sources, and Access-Control-Allow-Headers specifies the allowed request headers.

2. Configure the proxy in the front-end service

Configure the proxy in the front-end service to forward cross-domain requests to the back-end service. For example, in a Vue CLI project, you can implement a proxy using the devServer.proxy configuration item in the vue.config.js file, as follows:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

The code above

forwards requests beginning with /api to http://localhost:3000, where changeOrigin: true sets the proxy server's host header to the target URL's host header, and pathRewrite can override the request path to one that does not include the /api prefix.

Hope the above methods can help you solve the problem.