简介：今天，首席CTO Note将与您分享如何部署Djangoapivue。如果您可以解决您现在面临的问题，请不要忘记注意此网站。让我们现在开始！
本周花了两天的时间才简单地研究非常流行且广泛使用的前端JS框架VUE作为基本理解。VUE的作者是您Yuxi，中文。用户界面。它可以从底部逐层应用。它只注意观看层的层，该层易于使用和促进集成。在同一时间，它可以与现代工具链和各种库相结合，以创建复杂的单页应用程序。主要特征是以下几点：
根据VUE的普及，每日项目用于每日项目的正面，并记录了本文，主要是关于使用示例的环境结构。为了简单起见，本期仅显示官方默认示例。启示，当地没有Nodejs环境，它直接从环境开始。
配置TAOBAO来源，请注意-G是全局安装
完成后，您将使用CNPM替换NPM以验证CNPM：
之后，您可以使用CNPM安装软件包或缩写CNPM i软件包。没有代理，它比NPM快得多，并且不容易失败。请注意，可以使用诸如-G -D - 诸如-G -D-的参数设置安装范围。保存和其他参数。
安装Vue-CLI
Vue-CLI是官方的项目脚手架（您可以看到由类似的服务器端开发的构造开发的部分），用于构建项目构建和其他操作。我们将稍后继续引入。它还提供了用于执行和相关配置的图形接口。对于新手和其他关心结果的人，他们降低了很多学习成本。
安装命令
验证安装
之后，我们看到了一个Hello-work文件夹，其中包括一些配置和app.vue，main.js和其他默认情况下生成的程序文件。
请注意使用路由的使用，不要忘记将路由器视图/路由器视图标签添加到主模板中，指示路由开关的位置，否则路由页面无法正常显示。
首先保持默认演示内容不变，运行以下命令以启动本地服务以运行
之后，将激活相应的服务，并且可以通过地址和端口访问看到默认页面。
现在提到了部署，默认部署是使用NPM /CNPM执行的。
您可以使用参数设置它来获取满足不同需求的汇编结果。之后，您可以将包装的文件部署到服务器。
这是带有VUE-CLI脚手架的图形接口编译和包装管理。您可以使用以下命令打开它，然后按照提示添加所需的项目。您可以查看仪表面板显示，依赖关系管理，编译配置和项目构造非常方便。
启动VUE-CLI图形接口
然后访问提示。
以上是这一时期的内容，主要是针对一些初始准备。在目前，我从整个Vue中学到了诸如渲染，组件化，路线等。从总体上讲，依靠Vue提供的丰富文档等等。有用的工具以及非常高的知名度本身，在尝试稍微复杂的功能或遇到问题时，很容易找到相关的解决方案。开始。看到时间后，您可以更熟悉一些实际的项目，并真正熟悉使用它来执行带有后端的可用项目。
1. vue.js简介
2. VUE CLI脚手架
使用Django 2.2。
一般而言，使用指令NPM Run构建以获取包装的包装，然后将其交给NGINX进行路由转换（配置的位置 /静态）。需要的是配置Django上的可访问index.html路径。
但是（？），我想在本地测试，也就是说，没有nginx，并且debug = true环境尚未测试。结果，没有欢迎页面进入主页。打开开发工具并表明这就是它的样子：
解决方案：只需在installed_apps中注册VUE Engineering文件夹即可。
如果您不注册该应用程序，那么即使您编写文件夹，Django也不会扫描（根目录除外）：
如上所示，我在staticfiles_dir包装的Blogfro（即VUE文件目录）之后写了静态文件夹，但是输入主页时仍然是白屏幕。
白屏幕的路径表示模板模板是正常的，但是仍然无法加载静态文件。此需要注册的应用程序。注册后，您可以扫描静态文件。
注册后，已成功显示主页：
当没有加载该应用程序时，我发现CSS和JS文件放在已注册应用程序（BackND）的静态文件夹中，可以正常显示。此验证静态文件夹的扫描是否需要注册的应用程序。
以我的项目为例：
在调试模式下，您只需要static_url和staticfiles_dir。
根据Django文档，static_url是路径的地图。服务器将考虑将其匹配的路径，然后输入staticfiles_dir指定的目录以查找，并始终尝试返回匹配的第一个结果匹配。
在生产模式（封闭的调试）中，对静态文件的引用将失败。换句话说，对于性能考虑，我们不将Django服务器用于静态资源请求。我们经常使用其他反向服务器进行发送。
对于此考虑，Django使用CollectStatic指令将所有staticfiles_dir下的所有文件打包到static_root.dre.ter之后，您只需要配置此静态文件夹即可应用此静态文件夹。
之后，您可以直接开发Blogfro。开发完成后，使用NPM Run Build，然后直接打开DJANGO服务器进行测试。包装在线时，将内容复制到static_root下方，然后将内容复制到python manage.py collection.plectionstatic（主要是收集admin）资源。
实际上，问题并未完全解决，但这是由VUE + Django引起的。
Django使用其自己的静态路径索引，这与VUE有必要冲突。要处理它，必须调试它。
使用django和vue意味着您要将前端和后端分开，因此开发过程本身是隔离的。双方的交集应为最后一个部署（VUE包装，Django打开生产模式，并且反效力师打开（例如nginx）。这次，静态文件夹属于反服务器管理，不会出现此类问题。
由于我只有一个人（太痛苦），因此对Debug Vue和Django的需求同时引起了上述问题。
后端使用的DRF是UWSGI+NGINX
输入服务器项目文件目录，我的django项目放置在“/usr/myprojects/” directory.create uwsgi.ini文件中的uwsgi.ini文件中。
测试效果命令：
如果您访问：xxx.xxx.xxx.xx：8000成功，那么uwsgi.ini配置成功
我的nginx.conf位置是“ /etc/nginx/nginx.conf”
配置文件如下：
1.第一行
主要是给予NGINX加权。部署历史记录路线后，将删除地址背后的“＃”号码。包装部署后，将会有一个错误。
2.如果显示配置，则有两个服务器部署了前端服务和后端服务。值得注意的是，两台服务器使用同一服务器，这与侦听不同。
3. VUE部署需要注意反向代理地址：
和随后的端口问题
4.后端服务器需要注意该位置的UWSGI_Pass后面的最终口号。
5.交叉 - 域问题。如果我需要在自己的在线上找到配置，我没有遇到它，因为我在Django的设置中配置了交叉域。
6. Django Suit背景管理样式已经崩溃，需要更改，但是可以正常访问API。
7.我开始在后台收听端口8008，并在前端监视端口80中听，以便前端显示出良好的外观。尽管可以正常访问背景API，但VUE的本地开发环境也可以正常运行，并且文本和图片资源都正常显示。结果，它无法显示。对于地图，我选择了前面- 末端监视器以收听端口8008，后端监视80，并且显示后显示正常。原因尚不清楚////////// erly谈论它。
8.不要问我为什么我将前端和后端分开并在服务器上部署？糟糕，只是测试，这不是必需的
9.本文仅适合入门
关于Django的后台管理员（西装）修改（参考：Django中文网站:)
在环境中输入项目目录，您需要收集CSS样式并在终端中输入命令：
接下来，您可以找到静态文件包含CSS文件。此时，该网站已打开，样式显示正常
UWSGI启动xxx.ini后，将在同一目录中生成xxx.pid文件。UWSGI主要过程的过程数中只有一行内容。
关于UWSGI，输入同一目录
课
如果您无法获得环境，请指定环境
另外：请记住重新启动UWSGI并重新启动NGINX。
暴力删除：Fuser -K 80/TCP
Netstat -aptn命令行，检查所有开放端口号码
netstat -tlp |GREP 80查看是否使用了特定端口
PS -EF |grep uwsgi查看是否存在UWSGI端口
从0到1创建Django + ElementUI接口自动化平台花了一周多的时间。
VUE数据绑定模式可以减少许多前端工作，（前端很丑）
Web界面是根据Python + Request + Excel模式的升级和维护，与Corporate Wechat，Mail和Echarts报告显示，Timer BackgroundScheduler（而不是使用Windows Task Plan Plan + BAT -Alone模式），The The The Timer Backgroundsscheduler自动化自动化定时任务输出结果。基于网络，在多人游戏维护之后，我相信这将对未来的工作有所帮助。至少它也是写过Django Interface Framework.essence.essence的人
花了3天才能得到。
遇到问题：
2.然后将两者放在一起
3.集成后，Django启动后，Vue刷新当前的第404页，此VUE路由器/index.js，删除模式：“历史记录”
vue，config/index.js，构建方法，
据说要更改为ssetspublicpath：'https：//www.shouxicto.com/article/'-------“不需要结果，它看起来像
在VUE项目下，build/webpack.prod.conf.js，求解了注释模块。
5.在本地运行，部署到Apache，Vue，STAITC静态资源没有问题
参考如下，对静态资源的访问，路径是偶引号标记以解决解决方案
第一步是配置vue.config.js
第二步是修改路由并更改为哈希模式
步骤3将文件打包并执行以下操作。远端文件夹将出现在目录中，将文件拖动到服务器的根文件夹中
可以通过域名访问第四步
1.使用xshell.install nginx登录到阿里巴巴云服务器（本文中安装到/etc）
[播放]查看普通副本
CD/等
apt-get更新
apt-get install nginx
2.首先配置nginx，然后根据配置文件执行下一步
Open /etc/nginx/nginx.conf文件
[播放]查看普通副本
vim /etc/nginx/nginx.conf
nginx.conf中的配置如下：
[播放]查看普通副本
用户www-data;
worker_processes auto;
pid /run/nginx.pid;
事件{
Worker_connections 768;
#multi_accept on;
}
http {
##
＃基本设置
##
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
#server_tokens off;
#SERVER_NAMES_HASH_BUCKET_SIZE 64;
#server_name_in_redirect off;
包括/etc/nginx/mime.types;
default_type应用程序/八位字 - stream;
##
#SSL设置
##
ssl_protocols tlsv1 tlsv1.1 tlsv1.2; #dropping sslv3，ref：poodle
ssl_prefer_server_ciphers on;
##
#logging设置
##
access_log/var/log/nginx/access.log;
error_log/var/log/nginx/error.log;
##
#GZIP设置
##
gzip on;
gzip_disable“ msie6”;
#gzip_vary on;
#gzip_proxied ang;
#gzip_comp_level 6;
#gzip_buffers 16 8k;
#gzip_http_version 1.1;
##
#virtual主机配置
##
gzip on;
gzip_disable“ msie6”;
#gzip_vary on;
#gzip_proxied ang;
#gzip_comp_level 6;
#gzip_buffers 16 8k;
#gzip_http_version 1.1;
#GZIP_TYPES文本/纯文本/CSS应用程序/JSON应用程序/JavaScript Text/XML Application/XML Application/XML+JavaScript;
##
#virtual主机配置
##
包括/Etc/nginx/conf.d/*.conf;
包括/etc/nginx/sites-enabled/*;
＃以下内容添加到我们
服务器 {
听80;
server_name your-ipaddress;
root/home/my-project/;
索引index.html;
位置/数据{
重写^。+数据 /？（。*）$/$ 1休息；
包括uwsgi_params；
proxy_pass;
}
}
}
接下来，根据配置文件执行下一步。配置文件中的Server_name是Alibaba Cloud Server的IP地址
3.配置文件中的侦听是NGINX监视的端口号，因此您需要将安全组规则添加到Alibaba Cloud Server上的端口80
登录到本地浏览器输入中的Alibaba云服务器，请单击安全组单击“配置”规则单击以添加安全组规则，然后配置以下内容（注意：出口的方向和方向配置）
4.配置文件中的根和索引的两行表示我们将项目文件夹放在/home/my-process
例如，有两个项目文件夹是tst1，test2，是index.html。目录结构如下
/家
|- 我的项目
|-Test1
|-ddex.html
|-Test2
|-ddex.html
输入浏览器
该服务器将在test1 in/home/my-project下的index.html中执行；
如果您进入浏览器
该服务器将在/home/my-project中的test2下的index.html中执行；
这样，您可以将多个项目文件夹放在服务器下方。
5.因此，我们还需要在本地项目的配置/index.js中修改它。
[JavaScript]查看平原副本
AssetsPublicPath：'/test1/'，，
如果使用vue-router，请修改 /鲁特 /index.js
[JavaScript]查看平原副本
导出默认新路由器（{
基础：'/test1/'，//添加此行
linkactiveclass：“活动”，
路线
}）;
6. THENGINX配置文件中的位置针对交叉域处理，表明/数据的请求转发到数据。
[JavaScript]查看平原副本
const url ='/datas/seller';
这。$ http.get（url）。
...
}）;
7.修改后，在本地命令行下运行：cnpm run构建生成远端文件。ploadindex.html和远端文件中的静态文件到服务器的/home/home/my-process/test1。
/家
|- 我的项目
|-Test1
|-ddex.html
| - 静态
8.启动nginx
[播放]查看普通副本
服务nginx开始
9.项目部署成功，并在浏览器下输入：
结论：以上是首席CTO的相关内容的摘要。希望它对您有所帮助！如果您解决了问题，请与更多关心此问题的朋友分享?