Django项目使用vue打包前端页面使用教程

一、vue打包：

一般使用 npm run build 进行打包，打包完成后会生成一个dist文件夹

二、修改vue.config.js配置

vue.config..js配置里面增加：
        

assetsDir: 'static'

三、修改Django项目

将Django的static文件夹删除，移动dist进去，改名为static, 然后把static里面的sattic文件夹里面的css和js文件夹往外提一层，把static空文件夹删掉，参考图片：

删除前dist的目录配置：

替换static后的目录配置：

四、修改Django跟项目的urls.py

新增一条，按需引入需要的库：
path('', TemplateView.as_view(template_name='index.html'), name='index'),

五、访问页面检查是否正常

直接访问http://IP:PORT/即可正常访问vue当中router的 / 地址页面，比如项目地址为 http://127.0.0.1:8000/，则访问该地址即可进入vue的url为/的页面。