vue.js プロジェクトをパッケージ化する方法

vue.js プロジェクトをパッケージ化する方法: 最初に「webpack.dev.conf.js」ファイルを開き、次にビルドの下のassetsPublicPathを変更し、最後にターミナルで「npm run build」コマンドを実行します。

このチュートリアルの動作環境: Windows 7 システム、webstorm2017.1.4&&vue2.0 バージョン、Dell G3 コンピューター。

推奨: vue チュートリアル

vue プロジェクトのパッケージ化手順

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

1. ターミナル実行コマンド npm run build

2. 以下に示すように、パッケージ化が成功したこととプロジェクトの変更の兆候:

3.index.html をクリックし、ブラウザで実行すると、図に示すように、次のエラー メッセージが表示されます。

##4. どのように変更すればよいでしょうか?

具体的な手順は次のとおりです。 1. package.js ファイルの scripts コマンドを表示します。 2. webpack.dev.conf.js ファイルを開き、publicPath: config.dev を見つけます。 .assetsPublicPath を入力し、Ctrl キーを押して をクリックすると、index.js ファイルにジャンプします。
3. dev は開発環境、build はビルド バージョンです。build: '/' の下にあるassetsPublicPathを見つけて、assetsPublicPath:に変更します。 './'、つまり、 "/" の前にドットを追加します。
4. ターミナルで npm run build を実行します。

この時点で、index.html をクリックしてブラウザで実行すると、動的にバインドされた静的画像が見つからないことがわかります。そのため、static には絶対パスを使用する必要があります。画像のパスを絶対パスに変更する これでパッケージ化は完了です。

以上がvue.js プロジェクトをパッケージ化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。