【VueCli】项目部署到Django服务器

前言

最近正学习后端，打算使用VueCli编写前端代码并部署到Django上

前端

创建文件夹blogs，在当前路径下，使用vue可视化界面（vue ui）创建项目

在blog_client文件夹下打开终端输入（npm run serve）运行vuecli。

在打包项目之前需在blog_client文件目录下新建文件vue.config.js，设置项目打包静态文件的输出位置，将输出路径设置为static

以下为我的vue.config.js文件内容:

module.exports = {
    assetsDir: 'static', //静态资源目录（js, css, img）
}

后端

使用pycharm创建Django框架

启动Django服务器

服务器部署

现在将vuecli打包得到的dist文件夹放入Django当前文件目录下

dist文件夹所在的目录：

dist移动到Django项目下的位置：

对Django中的setting文件进行设置

# 在任意位置添加STATICFILES_DIRS
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),# 项目默认会有的路径，如果你部署的不仅是前端打包的静态文件，项目目录static文件下还有其他文件，最好不要删
    os.path.join(BASE_DIR, "dist/static"),# 加上这条
]

# 在DIRS中添加os.path.join(BASE_DIR,'dist')
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates'),
                 os.path.join(BASE_DIR,'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',
            ],
        },
    },
]

最后修改urls文件

from django.contrib import admin
from django.urls import path
from django.views.generic.base import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', TemplateView.as_view(template_name='index.html')),
]

打开地址显示vue界面，部署成功。