記事ディレクトリ
1. 梱包環境
1. 環境バージョン
| ソフトウェア | バージョン |
|---|---|
| ノードjs | v14.17.5 |
| ビュー/cli | 4.5.15 |
| ビュー | 2.x |
2. 環境をセットアップする
Nodejsをインストールする
win：
https://nodejs.org/download/release/v14.17.5/node-v14.17.5-x64.msi
linux：
https://nodejs.org/download/release/v14.17.5/node-v14.17.5-linux-x64.tar.xz
Linux のインストールプロセス:
wget https://nodejs.org/download/release/v14.17.5/node-v14.17.5-linux-x64.tar.xz
tar -xvf node-v14.17.5-linux-x64.tar.xz
mv node-v14.17.5-linux-x64 nodejs
ln -s /app/nodejs/bin/node /usr/local/bin/
ln -s /app/nodejs/bin/npm /usr/local/bin/
node -v
https://nodejs.org/download/release/v14.17.5/
デフォルトの vue/cli をアンインストールします
npm uninstall -g @vue/cli
vue/cli をインストールする
npm install -g @vue/[email protected]
2. プロジェクトを作成する
2.1. HBuilder X によるプロジェクトの作成
my-project-x は
表示テキストを gblfy.com に変更します
2.2. CLIでプロジェクトを作成する
cli を使用して新しいプロジェクトを作成する
vue create -p dcloudio/uni-preset-vue my-project-cli
デフォルトのバージョンを選択して (Enter キーを押すだけ)、
プロジェクト構造を作成します。
2.3. H5プロジェクト移植
my-project-cli プロジェクト src の下にあるすべてのファイルを削除します。
すべての uniapp ファイルを選択し、my-project-cli プロジェクト src にコピーします。変更は必要ありません。
2.4. プロジェクトの運営
cd my-project-cli
npm run serve
2.5. パーソナライズされた構成のパッケージ化
パッケージ化の出力パスを指定します。この構成は必須ではないため、スキップできます。
my-project-cli の下の package.json を編集し
、build:h5 の下に 2 行の設定を追加します。
"build:h5_test": "cross-env NODE_ENV=production UNI_PLATFORM=h5 UNI_OUTPUT_DIR=dist/build/h5_test vue-cli-service uni-build",
"build:h5_prod": "cross-env NODE_ENV=production UNI_PLATFORM=h5 UNI_OUTPUT_DIR=dist/build/h5_prod vue-cli-service uni-build",
2.6. プロジェクトのパッケージ化
デフォルトのパッケージングです。パッケージングを実行すると、dist フォルダーが生成されます。dist/build/h5 はパッケージング後の静的フォルダーです。それをサーバー上に置くだけです。
npm run build:h5
パッケージングのテスト パッケージングを実行すると、dist フォルダーが生成されます. dist/build/h5_test はパッケージ化された静的フォルダーです. それをサーバー上に配置するだけです.
npm run build:h5_test
2 つの違いはパッケージ化されたフォルダーの名前であり、その他はすべて同じです。
3. プロジェクト開発
3.1. 開発モードでプロジェクトを実行する
内蔵端子を選択
3.2. リアルタイムコンパイルの検証
タイトル コンテンツがコンパイルをサポートするかどうかを変更します
。gblfy.com を gblfy.com 666 に変更します。
上のスクリーンショットからわかるように、コンパイルはサポートされています。
4. 異常な概要
4.1. ノード Sass エラーレポート
スクリプトは事前に設定されているので、必要な環境を自由に設定でき、便利で高速で、見ているだけで目が輝きます。実際に実行してみると、意外にも依存パッケージが不足していることが判明したので、指示に従って一つ一つインストールしていきました。この期間中、次のようなノード Sass エラーが発生することがあります: ^4.0.0 と互換性がありません。これは、ノード Sass の互換性の問題が原因です。解決策:
npm uninstall node-sass
npm install [email protected]
プロジェクトを再実行するだけです