本篇文章首席CTO笔记来给大家介绍有关django怎么判断vue是否启动以及django使用vue的相关内容，希望对大家有所帮助，一起来看看吧。
本文目录一览：
1、django+vue前后端分离项目部署2、Vue项目启动过程以及配置3、如何解决Django与Vue语法的冲突4、Vue项目启动加载逻辑介绍5、django和vue初次接触6、Django+Vue静态资源问题django+vue前后端分离项目部署
后端用的drf，使用的是uwsgi+nginx
进入服务器项目文件目录下，我的django项目放在了“/usr/myProjects/”目录下了。在manage.py同级目录下创建uwsgi.ini文件，配置如下：
测试效果命令：
如果访问：xxx.xxx.xxx.xx:8000 成功， 则uwsgi.ini配置成功
我的nginx.conf所在位置是“/etc/nginx/nginx.conf”
配置文件如下：
1、第一行
主要就是给nginx加权限，vue部署后使用history路由时会去掉地址后面的‘#’号，打包部署后不加权限会有bug。
2、如配置所示，有两个Server，分别部署了前端服务，和后端服务，值得注意的是两个Server用的是同一个服务器，监听的端口不同。
3、vue部署需要注意的是反向代理地址：
以及后面的端口问题
4、后端的Server需要注意location中的uwsgi_pass 后面的端口号要和uwsgi.ini中配的相同，否则监听不到
5、后端跨域问题。如果遇到跨域需要自己网上找配置，我的没遇到，可能是因为我在django的settings中配置了跨域。
6、django-suit后台管理样式崩了，需要改，但是api可以正常访问，这个有空再说
7、我开始后台监听的是8008端口，vue前端监听的是80端口，这样前端显示好看。然而问题出现了，虽然后台api可以正常访问，vue的本地开发环境也能正常运行且文字、图片资源均显示正常，但是前端vue打包线上部署后，文字信息显示正常，图片信息缺失8008端口，导致显示不出来。为图方便我选择了前端监听8008端口，后端监听80，部署后显示正常。原因不太清楚///////有空再说吧。
8、不要问我为啥都前后端分离了还部署到一个服务器上？穷，而且只是测试，没必要
9、此文仅适合入门
关于django后台admin（suit）缺失的修改（参考：django中文网： ）
在环境中进入项目目录，需要收集css样式，在终端输入命令：
接下来你就回发现static文件中包含了css文件，此时再打开网站，样式显示正常
uWSGI 通过 xxx.ini 启动后会在相同目录下生成一个 xxx.pid 的文件，里面只有一行内容是 uWSGI 的主进程的进程号。
关于uwsgi,进入同届目录下
教训
获取不到环境，那就指定环境
另外：记得重启uwsgi，重启Nginx，实在不行就先把监听的端口kill掉再重启
暴力删端口：fuser -k 80/tcp
netstat -aptn命令行，查看所有开启的端口号
netstat -ntlp | grep 80 查看具体的端口是否使用
ps -ef | grep uwsgi 查看是否有uwsgi端口存在
Vue项目启动过程以及配置
我们点击 npm run dev 的时候，这就是启动 Vue 工程项目，那么它启动过程是什么样的呢？ Vue 项目启动过程，本文简要介绍。
在执行 npm run dev 的时候，会在当前目录中寻找 package.json 文件，包含项目的 名称版本 、 项目依赖 等相关信息。
从下图中可以看到， 启动 npm run dev 命令后，会加载 build/webpack.dev.conf.js 配置并启动 webpack-dev-server 。
webpack.dev.conf.js 中引入了很多模块的内容，其中就包括 config 目录下服务器环境的配置文件。
可以看到，在 index.js 文件中包含服务器 host 和 port 以及入口文件的相关配置，默认启动端口是 8080 ，这里可以进行修改。
index.html 的内容很简单，主要是提供一个 div 给 vue 挂载。
main.js 中， 引入了 vue 、 App 和 router 模块， 创建了一个 Vue 对象，并把 App.vue 模板的内容挂载到 index.html 的 id 为 app 的 div 标签下， 并绑定了一个路由配置。
上面 main.js 把 App.vue 模板的内容，放置在了 index.html 的 div 标签下面。查看 App.vue 的内容我们看到，这个页面的内容由一个 logo 和一个待放置内容的 router-view ， router-view 的内容将由 router 配置决定。
查看 route 目录下的 index.js ，我们发现这里配置了一个路由， 在访问路径 / 的时候， 会把 HelloWorld 模板的内容放置到上面的 router-view 中。
HelloWorld 中主要是一些 Vue 介绍显示内容。
所以，页面关系组成是 index.html 包含 App.vue，App.vue 包含 HelloWorld.vue 。
到这，我们开始安装 router 、 vuex 。
Ctrl+C 退出启动，继续执行 vue-cli ，脚手架安装插件 router 和 vuex 开始。
输入一个大写Y，按下Enter
vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
Vuex 主要有五部分：
① 安装 vuex
接下来我们在 src目录 下创建一个 vuex 文件夹
并在 vuex文件夹 下创建一个 store.js 文件
文件夹目录 长得是这个样子
在保证我们处于我们项目下，在命令行输入下面命令，然后，安装 vuex 。
② vuex 的关系图
③ 开始使用，在 mian.js 中，引入 vuex
④然后告知 vue 开始使用 vuex (Vue.use(Vuex))
在 store.js 文件中，引入 vuex 并且使用 vuex ，这里注意我的变量名是大写 Vue 和 Vuex
⑤接下来，在main.js中引入store
到这里算是，以及完成了。
我们再重新看一下此时的项目结构，多了router.js和store.js，其它相关的文件也被修改
如何解决Django与Vue语法的冲突
ac端WebStorm用户。 command + , 打开偏好设置，选择plugins,，点击下方的browse repositories... 在打开窗口的搜索栏里打"vue"。 有两个插件 但是都不是官方的。 如果想要高亮显示*.vue文件，可以在File Types 选项里找到HTML
Vue项目启动加载逻辑介绍
下面说下Vue项目启动的加载逻辑：
首先前端项目默认入口都是index.html
这里有个DIV的id为app，这里是vue的挂载点，后续views中的 .vue文件都会挂载在这里。
程序运行index.html后会寻找用到app的文件，即main.js
这里创建了一个vue实例，挂载了#app，也就是index.html中的id为app的div元素，接着加载App.vue中的页面
打开App.vue文件，查看配置有router-link和router-view
router-link 定义点击后导航到哪个路径下
router-view 会动态的把对应的组件内容渲染到router-view中
上面router-view中加载的内容有路由决定，于是再到路由文件查看此路由定义
路由配置文件中如图所示两种方式都可以实现。
接下来加载的就是具体的功能模块了
例如在Home.vue这个模块中又引入了HelloWorld.vue公共组件模块
关联了该组件，也会加载进去
项目运行起来后，会先去找入口文件index.html，在index.html中找到其实例需要挂载的位置，然后找到main.js中实例创建的地方，去加载组件中的模板，然后通过模板中的router-view，得知需要去查找路由，找到后加载对应的模板，如果模板中引用了公共的模板再加载公共模板进来，最后把处理后的这些呈现到浏览器中。
django和vue初次接触
因为要改一些以前的需求,主管让我学习一下vue,花了半天的时间算是入了门,就要拿成熟的项目去改,这个难度还是挺大的.
熟悉网站建设的人应该都知道vue是一个出色的前端框架,而django是python语言体系下的一个后端框架,虽然说他们两个都可以写出完整的网站,但是各有侧重点,django发开速度快,但是本身自带的模板引擎比较孱弱,而vue是以数据驱动和组件化的思想构建,在渲染页面方面实属一流,所以作为python开发者,有时候就会将这个两个框架结合起来,进行网站的开发.
不同的框架是如何结合在一起呢,这就引出了一个前后端分离的思想,后端只提供接口,api,,前端去调用这些接口,来拿数据,再渲染到html模板上
不同框架进行开发时,最大的问题就是跨域,由于框架不同,他们所启用的端口号是不同的,也就是不同的数据源,由于安全性,所以他们之间是不能直接访问的,解除方法是在django的配置文件中引入跨域许可的中间件,用Django的第三方包django-cors-headers来解决跨域问题
这样的话,我们就可以更方便的通过vue的启动方式来进行调试了
最后怎么整合到一起呢?我们知道django是通过指定模板和静态文件的路径来进行渲染的,所以,我们需要将vue文件打包,生成index主页面和静态文件,这样我们就可以把这两个分别放入django默认的文件夹下,或者重新指定路径就可以了.
Django+Vue静态资源问题
使用 django 2.2。
一般来说，使用指令 npm run build 得到打包的 dist 包，交给 nginx 做路由转换（配置 location /static ）即可，需要的只是在django配置可访问的 index.html 路径。
但是由于需要（？）， 我想在本地进行测试，也就是说在没有 nginx， 开启 debug = True 的环境下调试。于是打开 python manage.py runserver , 结果进入首页没有出现欢迎页面，打开 dev tools ，显示是这个样子的：
解决方法：将 vue 工程文件夹在 INSTALLED_APPS 里面注册下就行。
如果不注册 app， 那么即使写入文件夹， django 也不会扫描（根目录除外）：
如上所示我在 STATICFILES_DIR 中已经写入了 blogfro （也就是 vue 文件目录） 打包完成后的 static 文件夹，但是进入首页仍然白屏。
白屏表示模板 TEMPLATES 的路径正常，但是静态文件仍然加载不出来。这就需要注册 app 。注册后就能够扫描到静态文件。
注册后就成功显示了首页：
在没有加载 app时，发现把 css 与 js 文件放在一个已经注册 app（backend）的静态文件夹中，能够正常显示。这验证了静态文件夹的扫描需要注册 app。
以我的项目为例：
在 debug 模式下，只需要 STATIC_URL 与 STATICFILES_DIR 即可。
根据 django 文档 说法， STATIC_URL 是路径的映射。服务器会将匹配到它的路径视为静态文件请求，然后进入 STATICFILES_DIR 指定目录下查找，并总是尝试返回匹配到的第一个结果。
在生产模式下（关闭 debug ），对静态文件的引用会失效。换句话说，出于性能考虑，我们不使用django服务器进行静态资源请求。我们常使用其他反代服务器进行发送。
出于这个考虑，django 使用了 collectstatic 指令，能将所有 STATICFILES_DIR 下的文件打包到 STATIC_ROOT 下。之后只要配置反代服务器应用这个静态文件夹就行了。
之后就能直接对 blogfro 进行开发了，开发完成后使用 npm run build ， 然后直接开启 django 服务器就能进行测试。最后打包上线的时候将dist下的内容复制到到 STATIC_ROOT 下，然后 python manage.py collectstatic （主要是收集 admin ）的资源。
其实问题不是完全解决，但这是因为 vue + django 造成的。
django 使用自己的静态路径索引，必然有可能与vue发生冲突，为了处理必须进行调试。
使用 django 与 vue， 意味着希望进行前后端分离，所以开发过程本身就是隔离的。双方的交集应该是最后部署的时候（vue 打包， django 开启生产模式， 反代服务器开启（如 nginx））。这时候静态文件夹归反代服务器管理，不会出现这样的问题。
由于我只有一个人（太惨了），所以产生了同时调试 vue 与 django 的需求，这才导致了上面问题的产生。
结语：以上就是首席CTO笔记为大家整理的关于django怎么判断vue是否启动的全部内容了，感谢您花时间阅读本站内容，希望对您有所帮助，更多关于django使用vue、django怎么判断vue是否启动的相关内容别忘了在本站进行查找喔。