Vueプロジェクトの作成・パッケージ化・公開について詳しく解説

Vue プロジェクトを作成します。vue_demo はカスタム プロジェクト名です。

npm install -g vue-cli
vue init webpack vue_demo
cd vue_demo
npm install
npm run dev

npm run dev実行後に表示されるドメイン名。例: http://localhost: 8080 /

アクセス: http://localhost: 8080 /

開発ソフト：VSCode

1. パッケージ化コマンド:

npm run build

 2.リリース

方法 1: 静的サーバー ツールキット

注:serve をグローバルにインストールした場合は、serve dist を実行する必要があります。

npm install -g serve
serve dist

 上図のテスト結果: Web ページでhttp://localhost:3000/にアクセスする  か、localhost にアクセスしてマシンの IP アドレスを変更できます。

​

 方法 2: 動的 Web サーバー (tomcat)

  ステップ 1:構成を変更します: webpack.prod.conf.js、

  xxx はパッケージング フォルダーの名前で、開発者によってカスタマイズされます。例: フォルダー (プロジェクト名) に vue_demo の名前を付けたい出力
   : {      publicPath: '/xxx/'    }

​

ステップ 2: (再)
  npm run buildをパッケージ化する
 

ステップ 3:自動生成された dist フォルダーのコピーをパッケージ化し、プロジェクト名を xxx に変更します。

ステップ 4:   xxx を実行中の Tomcat の webapps ディレクトリにコピーする

 

ステップ 5 : http://localhost:8080/xxx にアクセスします。