vue3知识点9 vue项目打包到django的项目部署

vue3知识点9 vue项目打包到django的项目部署

一、vue项目打包

vuecli4.5项目打包配置

二、django配置

1.打开vue项目后台数据的django项目。

如何创建一个django项目并运行

2.将打包好的vue项目中新生成的dist文件复制到django项目目录下(与app同级).

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.和项目同名的目录下urls这样配置：

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

这样就可以在127.0.0.1的网址上执行vue项目了。

有时会报错：

1.403错误

控制台报错403Forbidden:

Forbidden (CSRF cookie not set.): /v3baigoodslist/

解决办法：

2. 404错误

有些地方的图片路径会出现问题，报404错误。
…

vuecli4.5的图片资源是在public下面，有些图片找不到路径，但是另一些图片能找到路径，这个好像是说后端没有这个路由，它把图像路径当成后端路由了，这个没发现怎么解决，找到了再来更新