プロジェクト環境の構築

プロジェクトの作成

// vue-cli version 4.x
npm install -g @vue/cli

vue create frontend

このようにして生成されたアイテムはWebspecに基づいて操作される.
npm run serve:websphecサーバを使用してローカルサーバを駆動
npm run build:webspecは最終成果物(build)を返します.

expressサーバとの連動

vueフロントエンドとexpressバックエンドを接続するには、vueのバンドル結果をwebpackでepxressのバックエンドに渡す必要があります.
まず、プロジェクトで設定したwebpackオプションを変更するには、vueを使用します.config.jsを変更する必要があります.まず、webpack実行時に参照されるファイルvue.config.jsを作成します.その後、次のコードを記述する必要があります.

vue.config.js

let path = require("path");

module.exports = {
    outputDir: path.resolve('../backend/pub'),
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3000/api',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },
}

outputDir:フロントエンド構造の国交正常化の支払いをどこに置くかを決定します
devServer.Proxy:現在のデスクトップアプリケーションとapiサーバが同じホスト上で実行されていない場合、apiリクエストをapiサーバに転送します.

バックエンドアプリケーション。jsにコードを追加

app.use(express.static(path.join(__dirname, 'pub')));

pubパスのファイルの実行を許可します.

バックエンドプロジェクト構造

npm run build

build後,フロントエンドのバンドル結果がバックエンド/pubで生成されたと判断できる.

連動が成功すれば.
http://localhost:8080
http://localhost:3000
2つのアドレスに接続すると、同じ画面(フロントフィールド画面)がポップアップされます.