In diesem Artikel wird hauptsächlich die Methode zur Auswahl von Baseurl in vue.js entsprechend der Code-Ausführungsumgebung vorgestellt. Jetzt teile ich sie mit Ihnen und gebe Ihnen eine Referenz.
Durch die Konfiguration eines gemeinsamen API-Präfixes können Daten besser lokal über die Schnittstellen-Proxy-Weiterleitung abgerufen oder während der Bereitstellung ein Reverse-Proxy in Nginx durchgeführt werden. Sobald das Projekt jedoch eine große Anzahl von Teilen umfasst, die einen Datei-Upload erfordern (der Datei-Upload ist möglich). Nicht (nehmen Sie die Ajax-Methode), wir müssen die Basis-URL der Ajax-Anforderungen im Projekt berücksichtigen. Der ursprüngliche Code lautet wie folgt
Vor der Änderung
// 创建axios实例、配置baseURL、超时时间 const service = axios.create({ baseURL: '/development/api', // 从环境进程中根据运行环境获取的api的base_url timeout: 5000 // 请求超时时间 })
Optimierungsmethode
Suchen Sie config/dev.env.js und config/prod.env.js und fügen Sie die Variable API_BASEURL (Namensanpassung) wie folgt im Code hinzu:
/* 保存分配角色 */ export function fetchSaveDisUser (params1) { return fetch({ url: '/user/empower', method: 'post', params: params1, paramsSerializer: function (params) { return Qs.stringify(params, { arrayFormat: 'repeat' }) } }) } /* 上传文件URL 从运行环境process.env中读取API配置 */ export let uploadUrl = '/development/api/doi/analys/upload'
Ersetzen Sie dann baseURL dort, wo Sie es verwenden müssen. API_BASEURL
Der geänderte Code lautet wie folgt
module.exports = { NODE_ENV: '"production"', // PS:不要复制、开发环境和生产环境有区别 API_BASEURL: '"/development/api/"' // 需要自己添加的代码 }
Das Obige ist das, was ich für alle zusammengestellt habe an alle in der Zukunft.
Verwandte Artikel:
Erklären Sie ausführlich, wie Sie dies in React-Komponenten verwenden.
So verwenden Sie TypeScript-Methoden in Vue-Komponenten (ausführliches Tutorial)
Implementieren Sie eine Einwegbindung im übergebenden Objekt der Vue-Komponente um es zu tun?
Das obige ist der detaillierte Inhalt vonSo wählen Sie Baseurl in vue.js aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!