Django3.0,Vue前后端分离以及访问静态资源的问题

2 篇文章 0 订阅
1 篇文章 0 订阅

在django目录下创建vue项目

在django项目根目录下运行 vue create myblog 创建一个vue项目myblog

将vue项目打包

将编写完成后的vue项目打包npm run build 会在myblog下创建一个dist文件夹,vue文件就在里面,(是需要安装好vue 和 vue cli的)

vue cli 3.0+打包后,dist目录下没有static目录,而Django那边的静态资源配置只认static,所以打包之需要新建一个vue.config.js文件 ,在里面加上一段代码将静态文件放入static文件夹中

module.exports = {
    assetsDir: 'static'
} 

或者使用vue ui命令,配置项目的资源路径为static会自动创建vue.config.js文件

完成后的目录结构
在这里插入图片描述

将vue项目整合到django中

将django 的 TEMPLATES 下的DIRS 修改为 os.path.join(BASE_DIR, ‘myblog/dist’) ,将模板文件指向myblog/dist文件下,页面就是dist下的文件了
然后添加一个TIATICFILES_DIRS, 映射静态文件的路径
在这里插入图片描述

修改urls.py文件,将根路径指向dist下的index.html文件
在这里插入图片描述

运行django项目,显示页面

运行 python .\manage.py runserver

访问http://localhost:8080/,页面显示就是vue的页面了
在这里插入图片描述

因为django只调用static目录下的静态文件,其他地方的文件就调用不了,这儿的favicon.ico就找不到,放到static目录下就能调用了。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值