vue プロジェクトの構築、パッケージ化、公開プロセスの概要

この記事では、Vue プロジェクトの構築、パッケージ化、公開プロセスを主に紹介します。必要な友人は参考にしてください。多くの友人はこの一連のプロセスに慣れていません。 VUE プロジェクトについてはよくご存知でしょう。ネチズンから寄せられた質問に基づいて、編集者が Vue プロジェクトの構築、パッケージ化、リリースのプロセス全体を整理しました。

1. vue プロジェクトの作成

1. まず、Node.js と npm が必要です

2. スキャフォールディングをインストールします

time - しかし今では、gitHub に公開して閲覧したり、vue ファミリー バケットを使用して独自のブログを作成したいと考えている初心者が確実にたくさんいます。 ここで、vue プロジェクトを github に公開する方法について説明します。vue 環境の構築について書く前に、以下を参照してください。 vue 環境の構築

2. vue プロジェクトのパッケージ化

1. 誰もが知っています。 npm run build を使用します。この時点で、dist/ の下にあるindex.html を直接開くと、ファイルは開くことができますが、すべての js、css、img およびその他のパスがルート ディレクトリを指していることがわかります。この時点で config/index.js を変更するには、assetsPublicPath フィールドの初期プロジェクトは / であり、プロジェクトのルート ディレクトリを指しているため、この時点でエラーが発生します。現在のディレクトリ ../ 親ディレクトリ/ ルート ディレクトリ

ルート ディレクトリ: コンピュータのファイル システムでは、ルート ディレクトリは、サブディレクトリに対する相対的な論理ドライブの最上位ディレクトリを指します。大きな木の「ルート」であり、すべての枝はそこから始まるため、ルート ディレクトリと呼ばれます。 Microsoft が開発した Windows オペレーティング システムを例に挙げます。

マイ コンピューター (コンピューター) を開き、C ドライブをダブルクリックして C ドライブのルート ディレクトリに入ります。 DドライブをダブルクリックしてDドライブのルートディレクトリに入ります

build: {
  env: require('./prod.env'),
  index: path.resolve(__dirname, '../dist/index.html'),
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './',
  productionSourceMap: true,
  // Gzip off by default as many popular static hosts such as
  // Surge or Netlify already gzip all static assets for you.
  // Before setting to `true`, make sure to:
  // npm install --save-dev compression-webpack-plugin
  productionGzip: false,
  productionGzipExtensions: ['js', 'css'],
  // Run the build command with an extra argument to
  // View the bundle analyzer report after build finishes:
  // `npm run build --report`
  // Set to `true` or `false` to always turn it on or off
  bundleAnalyzerReport: process.env.npm_config_report
 }

distルートディレクトリからインデックスファイルを開くとアクセスできます。

3. Github ページ

1. ホームページにウェアハウスを作成し、ここで直接無視します

2. ここでマスターまたは /doc を選択してマスターにコードをアップロードします

3.上に行があります ドメイン名はあなたが公開したプロジェクトを見ることができるあなた自身のページです

4. カスタムドメイン名

1. 現時点ではあなた自身のプロジェクトを閲覧することができますが、

username.github.io/xxx /dist

のようなアドレスは、実際にはあまり美しくありません。Alibaba Cloud にアクセスして、自分でドメイン名を購入し、オンラインでカスタマイズできます。独自のブログを作成し、コードを github にデプロイします。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連する推奨事項:

vue Scaffolding で Sass を設定する方法

vue-cli プロジェクトでモックデータを使用する方法

以上がvue プロジェクトの構築、パッケージ化、公開プロセスの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。