Vue3 ナレッジポイント 9 Vue プロジェクトのパッケージ化から django プロジェクトのデプロイ

1. Vue プロジェクトのパッケージ化

二、ジャンゴの設定

1. vue プロジェクトの背景データの django プロジェクトを開きます。

2. パッケージ化された vue プロジェクトで新しく生成された dist ファイルを django プロジェクトディレクトリ (アプリと同じレベル) にコピーします。

3. プロジェクトと同じ名前のディレクトリにある settings.py を開き、次のように構成します。

STATIC_URL = '/static/' #在settings文件最后一行。

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
    os.path.join(BASE_DIR, "dist/static"),

]

TEMPLATES = [  #在50多行

    {
    
    
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        #改变这里  DIRS改成这样
        'DIRS': [os.path.join(BASE_DIR, 'templates'),
                 os.path.join(BASE_DIR,'dist')

                 ]

        ,
        'APP_DIRS': True,
        'OPTIONS': {
    
    
            'context_processors': [
               ....
                ....
            ],
        },
    },
]

4. プロジェクトと同じ名前のディレクトリ内の URL は、次のように構成されます。

from django.contrib import admin
from django.urls import path

from v3baicaowei import views

#这里加上这句
from django.views.generic import TemplateView


urlpatterns = [
    #这里加上这句
    path('', TemplateView.as_view(template_name="index.html")),
    path('admin/', admin.site.urls),

    path('v3baisort/', views.v3baisort),
    ....
    ..
]

5. プロジェクトを実行するだけ

python manage.py runserver

このように、vue プロジェクトは 127.0.0.1 の URL で実行できます。

画像-20220126211704181

時々、エラーが報告されます:

1.403 エラー

コンソールエラー 403Forbidden:

禁止 (CSRF Cookie が設定されていません。): /v3baigoodslist/

解決：
ここに画像の説明を挿入

2.404エラー

いくつかの場所でイメージパスに問題が発生し、404 エラーが報告されます。
...
ここに画像の説明を挿入
vuecli4.5 の画像リソースは公開中. 一部の画像はパスを見つけることができません, 一部の画像はパスを見つけることができます. これは、バックエンドにこのルートがないことを意味するようです. 画像パスをバックエンドと見なします. route.これは見当たりません解決方法、見つけ次第更新します

ここに画像の説明を挿入