vueとdjangoの統合包装の実現方法
1.まずdjangoプロジェクトを作成し、djangoプロジェクトファイルの下でvueプロジェクトを作成する。
2.djangoプロジェクトファイルのsetting.pyを修正する。
djangoテンプレートのパスを変更して、vueプロジェクトのdistを指します。
3.vueパッケージの設定
djangoとvueはいずれも一つのサービスができるため、複数のドメイン名をテストする際にはドメインをまたぐなどの問題があります。
理想的な状態は、複数のドメイン名を使わず、1つのファイルを修正して素早く包装することができます。それなら一番いい方法はbuildのスピードを上げることです。
私のやり方は:
1.wepack.dev.co.nfig.jsファイルをコピーして名前をつけるwebpack.watch.com fig.js
2.設定情報の変更
(1)出力プロファイルを追加する(この構成で2~3秒ぐらい包装する)
注:この設定はローカル開発に便利なだけです。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
2.djangoプロジェクトファイルのsetting.pyを修正する。
djangoテンプレートのパスを変更して、vueプロジェクトのdistを指します。
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [BASE_DIR+"/vue-resources/dist"],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
django静的ファイルのパスを変更します。
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "vue-resources/dist/static/")
]
これは基本的にいいです。3.vueパッケージの設定
djangoとvueはいずれも一つのサービスができるため、複数のドメイン名をテストする際にはドメインをまたぐなどの問題があります。
理想的な状態は、複数のドメイン名を使わず、1つのファイルを修正して素早く包装することができます。それなら一番いい方法はbuildのスピードを上げることです。
私のやり方は:
1.wepack.dev.co.nfig.jsファイルをコピーして名前をつけるwebpack.watch.com fig.js
2.設定情報の変更
(1)出力プロファイルを追加する(この構成で2~3秒ぐらい包装する)
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[hash].js'),
chunkFilename: utils.assetsPath('js/[id].[hash].js')
},
(2)オプションの変更は、包装速度を効果的に高めることができます。
devtool: false,
3.新しいパッケージコマンドpackage.jsonを作成します。
"scripts": {
...
"watch": "webpack --watch --config build/webpack.watch.conf.js",
...
},
このようにして傍受更新の効果はnpm run watch
です。注:この設定はローカル開発に便利なだけです。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。