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

本文主要是介绍Django3.0，Vue前后端分离以及访问静态资源的问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在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目录下就能调用了。

这篇关于Django3.0，Vue前后端分离以及访问静态资源的问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---