vue.jsでbaseurlを選択する方法

この記事では主に、vue.js がコードの実行環境に応じてどのように BaseURL を選択するかを紹介し、参考にしていきます。

共通の API プレフィックスを構成すると、インターフェイス プロキシ転送を通じてローカルでデータを取得したり、デプロイ中に Nginx でリバース プロキシを実行したりできます。ただし、プロジェクトにファイルのアップロードが必要な部分が多数含まれる場合 (ファイルのアップロードでは Ajax は使用されません)。メソッド) を使用するには、プロジェクト内の Ajax リクエストで axios を使用するベース URL を考慮する必要があります。元のコードは次のとおりです

変更前

// 创建axios实例、配置baseURL、超时时间
const service = axios.create({
 baseURL: '/development/api', // 从环境进程中根据运行环境获取的api的base_url
 timeout: 5000         // 请求超时时间
})

/* 保存分配角色 */
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'

最適化メソッド

config/dev.env.js を見つけます。 config/prod.env.js に変数 API_BASEURL (名前のカスタマイズ) を追加します:

module.exports = {
 NODE_ENV: '"production"', // PS:不要复制、开发环境和生产环境有区别
 API_BASEURL: '"/development/api/"' // 需要自己添加的代码
}

次に、baseURL を使用する必要がある API_BASEURL

に置き換えます。

// 创建axios实例、配置baseURL、超时时间
const service = axios.create({
 baseURL: process.env.API_BASEURL, // 从环境进程中根据运行环境获取的api的base_url
 timeout: 5000         // 请求超时时间
})

rreee

以上は皆さんのためにまとめたものです。将来的に皆さんのお役に立てれば幸いです。

関連記事:

Reactコンポーネントでの使い方を詳しく解説します。

Vue コンポーネントで TypeScript メソッドを使用する方法 (詳細なチュートリアル)

vue コンポーネントによって渡されるオブジェクトに一方向バインディングを実装するにはどうすればよいですか?

以上がvue.jsでbaseurlを選択する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。