vue学习05——django和vue的结合

一、创建一个django项目

二、创建vue项目

2.1进入django的项目目录

 

 

2.2、创建vue项目（参考：https://www.cnblogs.com/XiqueBlogs/p/16193637.html）

vue2：采用执行命令vue init webpack  vueProjectName

vue3：采用 vue create vueProjectName

注意：vue项目、django项目、django的app应用应该在同一层级

 

 

2.3、进入到vue目录中（cd vue项目名称），使用npm run build打包vue项目，将所有东西打包成一个dist文件夹

 注意：vue3打包后dist中无static静态文件夹，Django那边的静态资源配置只认static，此时需要在前端目录找到vue cli 3.0的配置文件，这里有个坑就是，vue cli 3.0的已经没有config目录，配置文件需要手动添加，如果没有vue.config.js则要新建一个，更改为

module.exports = {
  // 输出目录
  assetsDir: 'static',
  // 基本路径
  // baseUrl: './',
};

 

打包完成

 

 

 

 

 三、配置django设置

3.1在django项目的settings.py文件中按照如下配置

 

 

 

 

 

 3.2修改django主目录下的urls文件，如下

 

 

四、运行django项目

4.1、回到django项目目录，执行python manage.py runserver

 

 搭建完成

参考来源：https://www.likecs.com/show-205015482.html