vueウェブパックの使い方

今回はvue webpackの使い方とvue webpackを使用する際の注意点を紹介します。実際の事例を見てみましょう。

開発中は、フロントエンドとバックエンドが同時に開発されます。フロントエンドがバックエンドを呼び出すために提供するインターフェイスも LAN 内にあります。ただし、プロジェクトをオンラインにプッシュすると、インターフェイスは実サーバーから取得されるため、テスト インターフェイスと実インターフェイスが頻繁に切り替わるのは非常に不快です。

最初のステップは、webpack 構成ファイル で異なるインターフェース アドレス

を設定し、dev.en.js ファイルを開くことです。次のように変更します:

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 API_ROOT: '"//192.168.1.8/api"' // 添加api地址
})

prod.env.js ファイル内にもあります

module.exports = {
 NODE_ENV: '"production"',
 API_ROOT: '"//www.baidu.com/api"'
}

2 番目のステップは、コード内で設定されたパラメーターを呼び出すことです

たとえば、私の例: src/config/api.js ファイル

// 原来的API接口地址
var root = 'https://cnodejs.org/api/v1'

// 新配置的API接口地址
var root = process.env.API_ROOT

Iこれを読んだことを信じてください。この記事の場合の方法は習得できました。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue が beforeEnter フック関数を実装する方法

JS イメージから Base64 メソッドの概要

以上がvueウェブパックの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。