Vue プロジェクトの構築、パッケージ化、公開についての詳細な説明

多くの友人は VUE プロジェクトの一連のプロセスに慣れていません。ネチズンからの質問に基づいて、編集者が VUE プロジェクトのビルド、パッケージ化、リリースの全プロセスを主に詳しく紹介します。 vue.js プロジェクトのパッケージ化とリリースのプロセス全体が、皆さんのお役に立てれば幸いです。

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 にデプロイします。
関連する推奨事項:

新しい vue プロジェクトを作成する方法

Vue プロジェクトを最適化する方法

vue プロジェクトの構築と実践例のチュートリアル

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