Django -- 集成vue项目

1. 创建django项目

# 创建mysite项目
django-admin startproject mysite    

# 创建blog应用
django-admin startapp blog

2. 创建vue项目

2.1. 安装vue

2.1.1 安装 node.js

https://nodejs.org/zh-cn/download/

2.1.2 配置镜像加速

npm install -g cnpm --registry=https://registry.npm.taobao.org

2.1.3 下载VUE

cnpm install -g @cue/cli

2.2 创建vue项目

mysite 文件夹 blog 文件夹 和 firstvue文件夹 要在同一目录级别

在创建时，会弹出很多选择项，根据自己需求自定义修改。也可以全部回车，使用默认的。这里我就直接全部回车。

# firstvue为前端项目的名称,可自定义。
vue init webpack firstvue

# 进入到firstvue项目中
cd firstvue

# 运行vue项目
cnpm run dev

# 运行调式的服务，会启动一个web服务，访问localhost:8080 即可调式

2.3 打包vue项目

# 打包vue项目，会将所有东西打包成一个dist文件夹  
cnpm run build

3. Django配置

1. 配置settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, "templates")],
        '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',
            ],
            'libraries': {
                'set_machine_obj': 'machine.templatetags.machine_obj',
            }
        },
    },
]

2. 修改项目主目录的urls文件

from django.conf.urls import url
from django.contrib import admin
from django.views.generic.base import TemplateView

urlpatterns = [
    url(r"^admin/",admin.site.urls),
    url(r"",TemplateView.as_view(template_name="index.html"))
]

html文件和static同级目录

4. 启动和访问

python manage.py runserver 0.0.0.0:8000

访问localhost:8000 则可以出现vue的首页。

5. BUG解决

5.1 为什么会404?

1. 检查

1. 检查index.html的文件,截取其中一段

<!-- 按这个相对路径看，index.html与css是同级目录，那href不是应该是./css/login.d7cd78d9.css(多个点)，修改，重新运行，发现还是404 -->
<link href=/css/login.d7cd78d9.css rel=prefetch>

2. 检查django访问静态文件的配置，是访问dist目录下似乎没毛病，但是我们忘记了还有STATIC_URL是访问带static文件夹的

2. 解决问题

1. 在frontend目录下创建vue.config.js

module.exports = {
    assetsDir: 'static',  // 指定`build`时,在静态文件上一层添加static目录
};

2. 重新打包项目,并将代码放进Django项目中

# 打包vue 项目
cnpm run build

# 启动Django项目
python manage.py runserver 0.0.0.0:8000

# 访问页面
http://127.0.0.1:8000