如何配置Vue项目以实现localhost本地访问和IP地址访问

在Vue项目中，您可以通过配置开发服务器和代理设置来实现本地和IP地址访问。以下是一些详细的步骤和代码示例：

步骤1：安装Vue CLI
首先，确保您已经安装了Vue CLI。如果没有安装，请按照以下步骤进行安装：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

步骤2：创建Vue项目
使用Vue CLI创建一个新的Vue项目：

vue create my-project

按照提示选择适合您的配置选项。

步骤3：配置开发服务器
进入项目目录：

cd my-project

在项目根目录下找到并打开vue.config.js文件。如果该文件不存在，请创建一个。在该文件中添加以下内容：

module.exports = {
  devServer: {
    host: '0.0.0.0', // 允许从任何IP地址访问
    port: 8080, // 指定开发服务器的端口号
    disableHostCheck: true, // 禁用主机检查，允许通过IP地址访问
    // 其他配置项...
  },
  // 其他配置项...
}

确保将port值设置为所需的端口号。host设置为0.0.0.0允许从任何IP地址访问开发服务器。disableHostCheck设置为true可以禁用主机检查，允许通过IP地址访问。您还可以根据需要添加其他开发服务器配置项。

步骤4：配置代理设置
在vue.config.js文件中，添加以下内容：

module.exports = {
  devServer: {
    // ...其他配置项...
    proxyTable: {
      '/api': { // 将所有以/api开头的请求代理到指定的后端服务器地址和端口号
        target: 'http://localhost:3000', // 后端服务器地址和端口号
        changeOrigin: true, // 启用代理时更改目标主机头为代理服务器的主机头
        pathRewrite: { // 重写请求路径，将所有以/api开头的请求替换为空字符串（即去掉/api）
          '^/api': ''
        }
      }
    }
  },
  // 其他配置项...
}

在上面的代码中，我们将所有以/api开头的请求代理到本地运行的后端服务器（地址为http://localhost:3000）。您可以根据实际情况修改代理设置，例如更改目标地址、端口号和请求路径等。这将允许您在开发过程中通过本地或IP地址访问后端服务器的API接口。请注意，这些代理设置仅适用于开发环境。在生产环境中，您需要使用适当的安全措施和配置来处理API请求。
步骤5：启动开发服务器并显示终端信息（可选）
要启动开发服务器并显示终端信息，可以使用以下命令：

```arduino
npm run serve — —open-editor=false —open-hosted=false —host=0.0.0.0 —disable-host-check=true —port=8080 —open=false —live-reload-port=8081 —hot-reload-port=8082 —https=false —cert=null —key=null —proxy-config=null —inspect=false —inspect-brk=false —client-reconnect-timeout=1000 —client-output-filter=null —client-subscriptions-output-filter=null —mode=development —inline-vue-style-loader=false —hot-reload-content=true —hot-reload-ignore-styles=false —hot-reload-ignore-scripts=false —hot-reload-ignore-fonts=false —hot-reload-exclude=’/(node_modules)/‘ —hot-reload-loader=’webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&reload=true’ —use-html5-history-mode=false —base-url=/ —url=http://localhost:8080 —disable-http2 —live-reload=true —live-reload-base-url=/livereload/ —live-reload-hostname=localhost —live-reload—port=80