javascript - Comment configurer la proxyTable vue-cli

Question

Comment utiliser settings.host + '/api/sop/' dans l'environnement en ligne, et le développeur local demande localhost:3000 ?

const instance = axios.create({
  baseURL: setting.host + '/api/sop/',
  timeout: 20000,
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  },
});

config

  proxyTable: {
  '/api': {
    target: "http://127.0.0.1:3000",
    changeOrigin: true,
    pathRewrite: {
      '^/api': ""
    }
  }
},

Answer 1

En utilisant vue-resource, l'idée théorique est la même. proxyTable和nginx的反向代理是一样的道理，拦截特定的url, transmettre aux autres serveurs.

// config
proxyTable: {
  '/api': {
    target: 'http://10.0.0.10:8080',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/api'
    }
  }
}

// code
this.$http.post('/api/login',{
  username: 'xxx',
  password: 'xxx'
}).then((response) => {
  // ...
}, (response) => {
  // ...
});

# 生产环境 nginx
location /api {
  proxy_pass http://10.0.0.10:8080/api;
}

Answer 2

Vous pouvez configurer une variable d'environnement et déterminer quelle configuration utiliser en jugeant la variable d'environnement

process.NODE_ENV === 'LOCAL' ? proxyTableLocal : proxyTableServer

Answer 3

Après la configuration, lors de la phase de développement npn run, si vous accédez à '/get/apple localement, le serveur local vous aidera à accéder à http://api.com:6688/get/apple pour obtenir les données distantes, en réalisant le fonction inter-domaines déguisée

Ouvrez config/index.js et ajoutez l'attribut proxyTable

module.exports = {

build: {...}
dev: {
       ...
    proxyTable: {
        '/': {
                 target: 'http://api.com:6688',
                 changeOrigin: true
            }
    },
       ...
}

}

https://github.com/383514580/...