Vue 简单配置公用接口地址方式

首先，我们需要了解Vue的配置文件vue.config.js。这个文件在Vue项目的根目录下，可以用来对Vue应用进行一些自定义配置。

在vue.config.js文件中，我们可以引入并配置Webpack插件。通过使用Webpack插件，我们可以对Webpack进行自定义配置，从而实现Vue项目的一些特殊需求，比如修改Webpack的别名、调整Webpack的编译输出等等。

以下是完整的Vue简单配置公用接口地址方式的攻略：

1.首先，在项目根目录下创建vue.config.js文件：

module.exports = {
  // 公共路径（必须有的）
  publicPath: '/',
  // 输出文件目录
  outputDir: 'dist',
  // 默认情况下，文件名中包含hash以便更好的控制缓存
  filenameHashing: true,
  // 构建时是否开启eslint校验
  lintOnSave: true,
  // 是否使用包含运行时编译器的Vue核心文件
  runtimeCompiler: false,
  // 生产环境不要开启source map，可以加速编译
  productionSourceMap: false,
  // 定义webpack插件
  configureWebpack: {
    // 定义插件
    plugins: [
      // DefinePlugin可以定义全局变量
      new webpack.DefinePlugin({
        'process.env': {
          NETWORK_API: "'https://api.xxx.com/'"
        }
      })
    ]
  },
  devServer: {
    port: 8080,      // 配置开发服务器的端口号，默认值为8080
    open: true,     // 是否自动打开浏览器，默认为false
    disableHostCheck: true,   // 禁用host检查
    proxy: {
      '/api': {   // 访问 /api/xxx 就会被代理到 target 中
        target: process.env.NETWORK_API,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

2.在vue.config.js文件的configureWebpack对象中使用webpack.DefinePlugin插件来定义全局变量，并将网络接口地址作为全局变量导入到Vue项目中：

new webpack.DefinePlugin({
  'process.env': {
    NETWORK_API: "'https://api.xxx.com/'"
  }
})

3.在vue.config.js文件的devServer对象中进行代理配置，实现访问 /api/xxx 接口时被代理到网络接口地址中：

proxy: {
  '/api': {   // 访问 /api/xxx 就会被代理到 target 中
    target: process.env.NETWORK_API,
    pathRewrite: {
      '^/api': ''
    }
  }
}

示例一：在Vue项目中获取接口数据

<template>
  <div>
    <div v-if="load">正在加载中...</div>
    <ul v-else>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        load: false,
        list: []
      }
    },
    mounted() {
      this.loadData()
    },
    methods: {
      async loadData() {
        try {
          this.load = true
          const res = await this.$http.get('/api/list')
          this.list = res.data.data
        } catch (e) {
          console.error(e)
        } finally {
          this.load = false
        }
      }
    }
  }
</script>

示例二：在axios中使用网络接口地址

import axios from 'axios'

axios.defaults.baseURL = process.env.NETWORK_API

export default axios

在以上示例中，我们使用了axios库进行网络请求，并将网络接口地址通过axios.defaults.baseURL设置为全局默认的接口地址。

以上就是Vue 简单配置公用接口地址方式的完整攻略及示例说明。我们通过Vue的配置文件和Webpack插件，实现了Vue项目中网络接口地址的公用配置，从而更便捷地进行接口数据的传递和请求。