vue+webpackプロジェクトの実践的な分析

今回は 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

最後に

npm run dev を実行すると、テストインターフェイスが実行されます。

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

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

推奨読書:

div の動きを制御するために矢印キーをバインドする方法

font-awesome font package ユースケース分析 (コード付き)

以上がvue+webpackプロジェクトの実践的な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。