Vue项目打包到django部署

前言

Vue项目一般用于实现前端的单页面富应用，其打包后的文件可简单看作静态文件，所以可以通过Nginx部署，当然也可以通过django部署(毕竟本质上还是一个html文件及各CSS,JS文件的集合)。不过前后端的耦合性以及性能就比nginx动静分离的差一点。但平时开发的时候可以这样部署，十分方便快捷。

测试所使用框架版本 django 3.06，VueCli 3.0

Vue打包

修改vue.config.js(VueCli3.0新建的项目里没有，要在项目目录新建一份)

修改为

module.exports = {
   
  assetsDir: 'static',// 静态资源打包输出目录 (js, css, img, fonts)，相应的url路径也会改变
};

然后npm run build，打包出来的dist结构如下