vue webpack の使用例の詳細な説明-jsチュートリアル-php.cn

vue webpack の使用例の詳細な説明

php中世界最好的语言

リリース： 2018-04-27 10:05:47

オリジナル

1641 人が閲覧しました

今回は、vue webpack の使用例について詳しく説明します。vue webpack を使用する際の注意事項は何ですか?実際の事例を見てみましょう。

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

ログイン後にコピー

最後に

npm run dev の場合、実行されているのはテストインターフェイスです。

npm run build を実行してプロジェクトをパッケージ化すると、パッケージ化されるのはサーバーの公式インターフェースです

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、その他の情報に注目してください。関連記事はPHP中国語サイトにあります！

推奨読書:

react は antd コンポーネントと連携してバックエンドシステムを構築します

Vue+beforeEnter はフック関数を使用します

以上がvue webpack の使用例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。