vue+webpackを使ってプロジェクトを作る方法（コード付き）

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

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

推奨読書:

React アプリケーション開発のスキャフォールディングのユースケース

js を使用して画像を Base64 に変換する方法

以上がvue+webpackを使ってプロジェクトを作る方法（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。