Vue + ElementUIのeコマース管理システムの例28プロジェクトがオンラインになり、ノードを介してWebサーバーを作成します

オンラインでのプロジェクト

1.プロジェクト構成

ノードプロジェクトを作成し、Expressをインストールし、Expressを介してWebサーバーをすばやく作成し、vueによって生成されたdistフォルダーをパッケージ化して、静的リソースとしてホストします。キーコードは次のとおりです。

const express = require（ 'express' ）
 // Webサーバーを作成する 
const app = express（）

// ホスト静的リソース 
app.use（express.static（ './ dist' ））

// Webサーバーを起動する 
app.listen（80 、（）=> { 
  console.log（ 'http://127.0.0.1で実行されているWebサーバー' ）
}）

新しいvue_shop_serverフォルダーを作成し、VScodeで開き、ターミナルを呼び出して次のように入力します。

npm init -y

パッケージ管理構成ファイルを初期化します。

次にExpressをインストールし、次のように入力します。

npmエクスプレス-S

インストールが完了したら、パッケージ化によって生成したdistディレクトリーをvue_shop_serverディレクトリーにコピーします。そして、新しいapp.jsエントリファイルを作成します。

最初にエクスプレスをインポートします。

const express = require（ 'express' ）
 // Webサーバーを作成する 
const app = express（）

// ホスト静的リソース 
app.use（express.static（ './ dist' ））

// Webサーバーを起動する 
app.listen（80 、（）=> { 
  console.log（ 'http://127.0.0.1で実行されているWebサーバー' ）
}）

サーバーが正常に実行できるかどうかをテストするには、ターミナルに次のように入力します。

ノードapp.js

端末が「http://127.0.0.1で実行されているWebサーバー」を正常に印刷できる場合、サーバーが正常に起動したことがわかります。

次に、ブラウザーを開き、http：//127.0.0.1と入力します

正常にアクセスできることがわかりました。

注：スタイルに問題がある場合は、element-ui jsファイルを最後のindex.htmlファイルに挿入するだけです。