vue+django+webpack搭建

一.前言

        最近接手了一个项目，后端是django，前端是django自带的模板，用的是jinja2，写了一段时间发现用起来特别不顺手，于是想在保持现有的模板基础上，引入vue框架，这样同事可以继续用自带的模板开发，而我也可以用比较熟悉的vue.js。但是发现网上的教程都是整个项目要不就是vue框架要不就是纯html，没有把两者结合起来的教程，在研究了整整两天的情况下终于突破瓶颈，分享一下自己的经验，谢谢大家捧场😄

二.环境搭建及配置

一.vue+webpack

        网上其实关于这个的教程还是挺多的，我也先记录下吧，尽量为大家填点坑。

1. 重新创建放置vue前端的文件夹，进入该文件夹 。

2.                                        npm  init  生成package.json文件

        至于这个文件为啥要创建，推荐大家看package.json文件简介，这个写的很详细，不然我说一大堆，还没人家文档几句话说的好💔。

3.                                        npm install [{{package_name}}] 安装所需的包

        最后会发现当前目录下增加了node_moudles文件夹，如果没有package_name，则直接安装package.json文件所有的包，如果有的话但是后面没有--save或者--save-dev，则直接安装包但是不会自动加入到package.json文件，后续可以通过。

                                            npm init --yes 新增到package.json

4. 新建index.html这是vue前端的入口文件，由于之前项目是纯js+html的模板，现在要将基础模板，比如标题栏和左边栏等嵌入到vue来，就需要用到html-loader插件了。同时要将之前的模板拷贝到src/assets， 最后会打包到静态文件static中。

图1

4.wepack是打包工具，vue.js文件的后缀都是.vue的，对于浏览器而言是无法识别的，所以webpack会帮你编译转成浏览器能识别的文件并打包，当然不是说转就转的，还需要各种loader助其一臂之力，关于loader可以看下loader简介。

5.webpack-dev-server插件就很强大了，它实际上相当于启用了一个express的Http服务器+调用webpack-dev-middleware。它的作用主要是用来伺服资源文件。这个Http服务器和client使用了websocket通讯协议，原始文件作出改动后，webpack-dev-server会用webpack实时的编译，再用webpack-dev-middleware将webpack编译后文件会输出到内存中。

6.手动创建webpack.config.js， 该文件对打包的入口文件和输出文件进行配置等等，详细可以看webpack配置，写的很详细。特别有3个地方要画重点！！！

    a.我们现在写的是前后端分离的项目，肯定会涉及到跨域问题，webpack的devServer.proxy就是解决该难点的路由代理。图2是我该文件的一部分配置，前端是127.0.0.1:8888后端是127.0.0.1:8000，下面就是把/get_left_tree/等路由转发到127.0.0.1:8000/get_left_tree/。

图2

    b.打包的时候一定要特别特别注意到输出路径问题，因为vue前端有个static文件夹，而且django也正好有，为了保证最后能运行在生产环境，一定要将打包后的文件是输出到django的static文件夹，否则django是找不到的，如图13。这是为啥呢？因为django的配置文件中是要配置静态文件的地址的，才能找到静态文件，图3就添加了打包后生成的dist目录，否则其他文件夹都无法找到静态文件。django的几个静态文件的配置参数可以看django静态文件配置，写的还是很直白明了的👍。

图13 图3

    c.配置/src/assets下的文件打包到static/dist目录下，这样可以绝对路径访问， 否则生产环境情况下会找不到相对/src/assets文件夹的文件。

7.最后生成的前端目录结构图5，

图5

        配置webpack.config.js的过程中遇到一个问题：一直都没有解决，因为我的路由没有统一的规律(也是因为之前用纯js写的，没有考虑那么多，如果是新项目的话建议转发后端路由的话最好有一个统一的前缀，例如/api之类的，这样匹配的话就直接是/api/**)，所以如果通过转发要将需要转发的路由全部列出来，这样会很累赘，看了路由代理这个介绍想到了bypass，于是有了图6的配置，将不需要转发的路由过滤出来，但是发现压根没有过滤，还是全部都转发了，查了很多资料，发现都没有解决，如果有哪位大神知道，一定要留言指点迷津啊😹

图6

 二.django

        django的安装和配置网上有很多，这里就不细说了。再次强调需要注意的是静态文件的配置，否则vue最后打包后生成的文件django无法找到，页面加载不出来。

三.生产环境部署

        终于到了生产环境的时候，这个时候就不会有跨域的问题存在，但是由于我之前基础模板都是在django的templates文件夹下，django配置如下。

图7

        如何让django能找到vue的入口，此时需要做两件事：

    a.把vue中的入口文件index.html拷贝到templates文件夹下

    b.django urls文件新增vue的入口路由，这里有个大坑，一定要特别注意：vue的路由是带#号，类似http://localhost:8000/#/home(我的首页就是这个路由)，我第一次把该路由直接增加到urls文件中，如图8，结果发现该路由永远都是Index的页面，也就是匹配到第一个路由下了，最后才明白，原来url中的“#”后的内容不会传给后端，所以最后访问的路由就还是http://localhost:8000/。接下来怎么办呢？于是我尝试把路由配成了图9，结果发现自动就跳转到了http://localhost:8000/vue/#/home。终于成功了，因为在vue中的main.js文件就已经写了根目录跳转到/home， 图12所示

图8 图9 图10 vueTemp的urls文件 图11 vueTemp的views文件 图12 main.js文件

        终于搞定了整个流程，本人还是新手一枚，也是边学先研究，希望对一些和我有困惑的人有点帮助，共同学习共同进步⛽️