問題の発生#
年末に私は小さなプロジェクトを開発しました：プリントテンプレートデザイナー。開発の過程で、実際には多くの問題に直面しました。今、少し時間を取って問題をいくつか記録し、将来の参考のために提供したいと思います。
問題は、私がすでにパッケージを配布した後に発生しました。親プロジェクトでこのプリントテンプレートデザイナーをインポートする必要があるため、lib ライブラリの形式で、つまり npm パッケージとして親プロジェクトに組み込む必要があります。その後、問題が発生しました：親プロジェクトのページを開くと、左側のパネルがすべて空白です（下図の選択部分）。通常、コンポーネントの内容が表示されるはずです！
次に、コンソールを開いてみると、次のエラーが表示されます：SyntaxError: Unexpected character '<'。ブレークポイントで調べると、チャンクファイルの場所が見つからないことがわかり、インポート時にエラーが発生していることがわかります。このパスが存在しない場合、/にリダイレクトされるため、このエラーが発生します。
そこで、インターネットで助けを求めた結果、次の記事を見つけました：
[VUE 报错] npm 的 lib 库打包模式，引用时 ChunkLoadError 加载分包失败
ブロガーの説明に従って、
懒読み込みを使用しているため、webpack のコンパイル時に、分割パッケージの参照パスが「ウェブページのルートディレクトリ」に基づいて変換されますが、私たちの目標は node_modules//lib/ にある分割パッケージです。
そのため、ウェブページのルートディレクトリの js ディレクトリでは、対応する遅延読み込みの分割パッケージが見つかりません。
最後に、ブロガーの解決策に従って、分割パッケージをマージすることを選択し、vue.config.js で次の設定を行いました：
module.exports = defineConfig({
configureWebpack: {
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
// チャンクを1つだけ作成し、分割しないように制限する
maxChunks: 1
})
]
}
})
その後、パッケージをテストし、問題が解決しました！