如果你希望隐藏后端接口调用的细节，可以考虑在Vue2和Nuxt.js构建应用程序时，通过使用serverMiddleware和代理来隐藏实际的API URL，但这种方式还是会暴露API的调用结果。

如果想要隐藏后端接口调用的细节并确保数据不容易被用户通过浏览器开发者工具查看，那么我们就需用到Nuxt.js 的服务器端渲染（SSR）特性，可以在服务器端获取数据，然后将处理后的数据传递给前端，而前端不需要直接调用实际的后端 API。

下面我们就来看看如何通过SSR技术来实现对于后端接口调用的隐藏。

创建 Nuxt.js 项目

首先，我们需要创建一个新的 Nuxt.js 项目，可以通过如下的命令来创建。

npx create-nuxt-app my-nuxt-app

接下来就是按照提示去选择合适的项目设置。设置完成之后，可以通过如下的命令来安装相关的依赖配置，如下所示。

cd my-nuxt-app
npm install

配置服务器端渲染（SSR）

在默认情况下服务端渲染技术特性是启动的，但是我们还是可以在nuxt.config.js配置文件中确认相关配置是否启动，如下所示。

// nuxt.config.js
export default {
  // 开启服务器端渲染（默认开启）
  ssr: true,
  
  // 其他配置...
  modules: [
    '@nuxtjs/axios'
  ],
  axios: {
    // 可以配置 axios 代理（可选）
    proxy: true
  },
  proxy: {
   '/mdb/': 'http://192.168.1.5:8086' // 示例 API
  },
  // 其他配置...
}

这里用到了'@nuxtjs/axios'模块，如果没有安装这个模块我们可以通过如下的命令来安装该模块。

npm install @nuxtjs/axios

使用 asyncData 在服务器端获取数据

在 Nuxt.js 中，asyncData 方法允许你在页面组件中获取数据，并在服务器端渲染之前将数据注入到页面中。

我们可以创建一个新的页面组件 pages/index.vue，并使用 asyncData 方法从 API 获取数据。如下所示。

<!-- pages/index.vue -->
<template>
  <div>
    <h1>Posts</h1>
    <ul>
      <li v-for="post in posts.data" :key="post.id">
        {{ post }}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    async asyncData({ $axios }) {
      // 从 Nuxt 的 serverMiddleware 代理 API 获取数据
      const posts = await $axios.$get('/mdb/collect')
      return { posts }
    }
  }
</script>

在这个例子中，asyncData 方法会在服务器端执行，从 /mdb/collect 获取数据，并将数据注入到组件的 posts 属性中。这意味着，页面在被发送到客户端之前，数据已经准备好了，客户端不会看到实际的 API 调用 URL。

启动开发服务器

可以通过如下的命令启动开发服务器。

npm run dev

然后在浏览器中通过http://localhost:3000访问应用程序，这个时候，我们就可以看到通过接口调用到的数据的渲染，但是我们打开开发者工具之后，在网络中是没有发现任何的实际的接口调用的情况发生。这样我们就实现了对于后端接口的保护。

总结

通过上面的步骤，我们就可以通过Nuxt.js 的服务器端渲染特性来隐藏实际的 API 调用 URL，这样就可以确保不要在前端代码中暴露敏感的数据或业务逻辑，同时通过这种技术也可以隐藏接口调用，从而保证了应用服务的安全性。