vueを手動で構築するwebpack構成の注意点

900 ワード

公式ドキュメントhttps://vue-loader.vuejs.org/zh/
主にvueファイルの処理ですが、まずvue-loader処理を提供し、同時にvue-template-compilerを同時にインストールしなければならないことを公式に提示しました.webpackはテンプレートを認識できないため、プラグインを追加しなければなりません.
yarn add -D vue-loader vue-template-compiler
{
   test: /.vue$/,
   loader: "vue-loader",
}
const VueLoaderPlugin = require("vue-loader/lib/plugin");
plugins: [
    //          !
    new VueLoaderPlugin()
]

これでテンプレートはvueファイルの処理に問題ありません
しかし、私たちのページの起動がまだ私たちの内容が現れていないのは、vueのデフォルトのエントリファイルの問題のためで、手動で別名でvueのコンテンツファイルを指すことができます.
resolve: {
  alias: {
    vue$: "vue/dist/vue.esm.js",
  },
}

もちろん面倒でなければ、インポートごとに書きます.
import Vue from 'vue/dist/vue.esm.js'

その後、vueプロジェクトを走ることができます(ファイルのパッケージ化、ホットロードなどの構成については、本明細書の範疇内ではありません).