问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

解决前端vue每次修改ip地址的问题？

头像
时倾
    611342

    前端vue遇到了私有化部署，ip地址不是唯一的，每次都修改完ip地址再打包再重新部署，很繁琐？

    我尝试在public文件夹下面创建一个config.js文件，然后再去index.html内引入，但是当我再去封装的axios里面去使用时 就会报错（提示找不到VUE_APP_URL），然后我去使用imort导入导出时，虽然不在报错，但是在打包部署了的情况下，再去修改config.js文件内的ip地址，是没有任何响应的？请问大佬们这该如何解决呢？
    图片.png
    图片.png
    图片.png

    vue.jsjavascriptaxios前端
    阅读 3k
    avatarAI BotBETA

    在前端 Vue 项目中，如果需要将 IP 地址等配置信息动态地集成到应用程序中，而不是每次修改 IP 地址后重新打包部署，可以采用以下方法：

    1. 使用 .env 文件：在项目的根目录下创建一个 .env 文件，其中包含需要动态配置的变量和值。例如，可以在 .env 文件中添加以下内容：
    VUE_APP_URL=http://192.168.0.100:8080

    在应用程序中，可以通过 process.env 对象访问这些变量。例如，在封装的 axios 中使用 VUE_APP_URL：

    import axios from 'axios';

const instance = axios.create({
  baseURL: process.env.VUE_APP_URL // 使用环境变量
});

// 使用 instance 发起请求...
    1. 使用动态导入：可以在应用程序中使用动态导入 (import()) 来导入需要配置的模块或组件。在动态导入中，可以传递参数来动态地改变导入的结果。例如，在封装的 axios 中使用动态导入：
    // 在主程序入口文件中动态导入 axios
const axiosInstance = import(/* webpackChunkName: "axios" */ 'axios').then((axios) => {
  const instance = axios.create({
    baseURL: process.env.VUE_APP_URL // 使用环境变量
  });
  return instance;
});

    然后，在其他需要使用 axios 的地方，可以使用 axiosInstance 发起请求。当 IP 地址发生变化时，只需要更新 .env 文件中的 VUE_APP_URL 变量即可，不需要重新打包部署应用程序。

    1. 使用 Nginx 反向代理：如果私有化部署使用了 Nginx 作为反向代理，可以通过配置 Nginx 来动态地修改请求的 IP 地址或主机头。在 Nginx 的配置文件中，可以添加以下内容：
    location / {
  proxy_pass http://192.168.0.100:8080; // 实际的 IP 地址和端口号
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
}

    在应用程序中，可以忽略 IP 地址的配置，直接使用相对路径发起请求。Nginx 会将请求代理到实际的服务器上，并动态地修改请求的 IP 地址等头部信息。当需要修改 IP 地址时，只需要更新 Nginx 的配置文件并重新加载 Nginx，不需要重新打包部署应用程序。

    5 个回答
    得票最新
    头像
    边城
      59.8k157274
      ✓ 已被采纳

      不管是不是私有化部署，都不建议在前端代码里把目的地址写死，毕竟还有 CDN 等情况。

      如果是小型项目，就算是前后端分离开发，也可以打包成一体发布，这样目标地址就可以直接从 /pathname/... 开始，因为前端访问的就是后端服务器地址（含端口），所以随便怎么部署都不会有问题，相关内容可以参考阅读：前后端分离：分离开发，一体发布

      如果一定要分开发布，前端需要从后端去获取地址（毕竟要让用户自己设置环境不太现实），那么这里就有好几种获取方式，题主用到了最常用的一种方式，加载 config.js。

      这种方式本身没有问题，发布之后更改一下 config.js 就好。在开发的时候提示找不到变量，多数是 ESLint 等工具没找到相关变量的定义，或者没有通过 import 引用。如果是 const 定义的，最好是 export 出来再使用的地方 import，但这样会造成耦合，所以一般不会直接定义 const，而是挂在 window 上去。

      挂在 window 上相当于是全局变量，所以这里解决 ESLint 的问题有两种办法：一种是在 ESLint 中配置 global（参阅：Configure Language Options - ESLint），下面是文档中的配置示例：

      {
    "globals": {
        "var1": "writable",
        "var2": "readonly"
    }
}

      另外一种办法，是在使用了 TypeScript 的情况下，定义一个全局类型，扩展 Window 接口

      snipaste_2023-11-25_12-51-02.png

      头像
      twips_mio
        16513

        报错（提示找不到VUE_APP_URL）这个实际上是有的，ESLint识别不到，可以在.eslintrc.js 增加全局变量标识

        globals: {
  'VUE_APP_URL': true
}
        头像
        cnjs
          2.2k2525

          上面AI Bot的回答不错，可以试试。

          或者项目代码在真实环境中写相对路径，不指定ip，默认接口请求就是当前环境下的（nginx 之类做下反代）。

          或者简单粗暴， VUE_APP_URL 挂在在 window 下，这样config.js 中直接修改也可完成需求。

          头像
          kaipizhe
            1.6k29195272

            根目录建两文件 .env.development 和 .env.production

            本地环境
            .env.development

            // .env.development
VITE_APP_URL=http://127.0.0.1:8081

            打包后的环境
            .env.production

            // .env.production
VITE_APP_URL=http://www.xxx.com

            使用 import.meta.env.VITE_APP_URL

            头像
            林枫
              4k1828
              头像
              ForkKILLET
                4.2k32767

                用你的第一种方法报错的话，那别 const 了，你直接挂在 window 下，window.VUE_APP_URL

                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题