ホームページ > 記事 > ウェブフロントエンド > vue+webpackプロジェクトの実践的な分析
vue+webpackプロジェクトの実践的な分析
- php中世界最好的语言オリジナル
- 2018-06-05 15:27:071408ブラウズ
今回は 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 サイトの他の関連記事を参照してください。