导读：今天首席CTO笔记来给各位分享关于djangoapivue如何部署的相关内容，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
vue项目创建和部署使用
这周花了两天时间简单研究了下目前非常流行和应用广泛的前端js框架 vue ，作为一个基础的了解。 vue 的作者是国人尤雨溪。官网描述 vue 是一套用于构建用户界面的渐进式框架，可以自底向上逐层应用，它核心只关注视图层，易于上手和便于整合。同时，其可以与现代化的工具链和各种类库结合，用以创建复杂的单页应用。其特点主要有以下几点：
基于 vue 的流行度，日常项目前端有在使用，遂记录这篇文章，主要讲从环境搭建到使用样例。在学习中，体验和完成了一个功能稍微丰富的例子，为简洁起见，本期只展示官方默认例子。鉴于本地也没有nodeJs环境，所以直接从环境搭建开始。
配置淘宝源，注意 -g 是全局安装
完成之后将使用 cnpm 替换 npm ，验证 cnpm :
之后的依赖安装就可以使用 cnpm install package 或简写 cnpm i package 进行。没有代理的情况下，相比npm国内要快很多，也不容易失败。注意可以使用 -g -D --save 等参数设置安装范围。
安装 vue-cli
vue-cli 是官方提供的项目脚手架（可以看做类似服务端开发的maven用于构建的部分），用来进行项目构建等操作，后面我们会继续介绍。它还提供了一个图形界面，用来执行和进行相关配置，对于新手等只关心结果的人，减少了很多的学习成本。
安装命令
验证安装
之后我们看到一个 hello-world 的文件夹，里边包括默认生成的一些配置和 App.vue , main.js 等程序文件，如下是支持 vue-router 路由 （控制页面切换等操作） 的一个 main.js 具体内容
注意使用路由时，不要忘记在主模板里添加 router-view/router-view 标签，表示路由切换的位置，否则路由页面无法正常展示。
先保持默认的demo内容不变，运行如下命令启动一个本地服务来运行
之后会启动对应的服务，通过地址和端口访问，就能看到默认的页面。
既然提到了部署，默认的部署使用 npm/cnpm 进行，如下命令，输出内容在 /dist 目录。
可以使用参数来设置，得到符合不同需要的编译结果。之后即可以将打包的文件部署到服务器上。
这里说下 vue-cli 脚手架所带的图形界面编译打包管理，可使用如下命令开启，然后按照提示，加入需要的项目，可以查看仪表盘展示，进行插件管理，依赖管理，编译配置，以及项目构建的操作，十分方便。
启动 vue-cli 图形界面
然后按照提示访问即可。
以上就是本期的内容，主要是一些初期的准备工作。目前整体了解了vue相关，如渲染，组件化，路由等。总体来说依托 vue 提供的丰富文档和比较好用的工具，以及本身非常高的流行度，在尝试稍微复杂的功能或者遇到问题时，容易找到相关满意的解决方式，总体来说还是比较适合入门的。后续看时间能多熟悉些实际项目，真正用于搭配后端做个可用的项目。
1. Vue.js介绍
2. Vue CLi脚手架
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 的需求，这才导致了上面问题的产生。
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端口存在
django + vue整合后，部署到windows apache遇到的问题汇总
花了一周多时间，从0到1，创建了 django + elementUI接口自动化平台。
vue 数据绑定模式，能减少很多前端工作，（前端目前难看的很呐）
web接口自动化，基于 python + request + excel模式的升级维护，结合企业微信、邮件、echarts报告展示，定时器BackgroundScheduler（而不是用windows任务计划+bat 单机模式），定时任务输出结果。归于web，多人维护后，相信对将来工作有帮助。。。起码也是写过django接口框架的人了。。
部署花了3天时间，才搞定。哀愁
遇到问题：
2、然后把两个整个在一起
3、整合后，django 启动后，vue刷新当前页面404，这个vue router/index.js，去掉mode: 'history'
vue，config/index.js，build方法，
说要改为ssetsPublicPath: './' -----》结果不需要，原样
vue项目下，build/webpack.prod.conf.js，注释模块解决。
5、在本地跑没有问题，部署到apache，vue，staitc静态资源无法访问
参考如下，给静态资源访问权限，并且路径是双引号，解决
vue项目如何部署到服务器
第一步配置 vue.config.js
第二步修改路由，改为 hash模式
第三步文件打包,执行以下，目录中会出现一个dist文件夹，将文件拖到服务器的 root 文件夹中
第四步可以通过域名进行访问
怎么把VUE项目部署到服务器上面
1.使用xshell登录到阿里云服务器。安装nginx（本文安装到/etc下）
[plain] view plain copy
cd /etc
apt-get update
apt-get install nginx
2.首先先配置nginx，然后再根据配置文件做下一步操作
打开/etc/nginx/nginx.conf文件
[plain] view plain copy
vim /etc/nginx/nginx.conf
在nginx.conf中配置如下：
[plain] view plain copy
user www-data;
worker_processes auto;
pid /run/nginx.pid;
events {
worker_connections 768;
# multi_accept on;
}
http {
##
# Basic Settings
##
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;
include /etc/nginx/mime.types;
default_type application/octet-stream;
##
# SSL Settings
##
ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
ssl_prefer_server_ciphers on;
##
# Logging Settings
##
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
##
# Gzip Settings
##
gzip on;
gzip_disable "msie6";
# gzip_vary on;
# gzip_proxied any;
# gzip_comp_level 6;
# gzip_buffers 16 8k;
# gzip_http_version 1.1;
##
# Virtual Host Configs
##
gzip on;
gzip_disable "msie6";
# gzip_vary on;
# gzip_proxied any;
# gzip_comp_level 6;
# gzip_buffers 16 8k;
# gzip_http_version 1.1;
# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
##
# Virtual Host Configs
##
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
#以下为我们添加的内容
server {
listen 80;
server_name your-ipaddress;
root /home/my-project/;
index index.html;
location /datas {
rewrite ^.+datas/?(.*)$ /$1 break;
include uwsgi_params;
proxy_pass ;
}
}
}
接下来就根据配置文件进行下一步工作。配置文件中的server_name后面是阿里云服务器的ip地址
3.配置文件中的listen是nginx监听的端口号，所以需要在阿里云服务器上为80端口添加安全组规则
在本地的浏览器登录阿里云服务器-进入控制台-点击安全组-点击配置规则-点击添加安全组规则，之后配置如下（注：入方向和出方向都要配置）
4.配置文件中的root和index那两行表示我们把项目文件夹放在/home/my-project下
例如有两个项目文件夹分别为test1，test2，里面都有index.html。则目录结构如下
/home
|--my-project
|--test1
|--index.html
|--test2
|--index.html
则在浏览器输入
服务器便会在/home/my-project中找到test1下的index.html执行；
如果在浏览器中输入
服务器便会在/home/my-project中找到test2下的index.html执行；
这样便可以在服务器下放多个项目文件夹。
5.所以我们也需要在本地项目的config/index.js里的build下进行修改,如果要把项目放到test1下，则
[javascript] view plain copy
assetsPublicPath: '/test1/',
如果用到了vue-router，则修改/router/index.js
[javascript] view plain copy
export default new Router({
base: '/test1/', //添加这行
linkActiveClass: 'active',
routes
});
6.nginx配置文件中的location则是针对跨域处理，表示把对/datas的请求转发给,本文中这个下就是需要的数据，例如,在本地项目文件中ajax请求数据的地方如下
[javascript] view plain copy
const url = '/datas/seller';
this.$http.get(url).then((response) = {
.....
});
7.修改后在本地命令行下运行:cnpm run build 生成dist文件。把dist文件里的index.html和static文件上传到服务器的/home/my-project/test1下，目录结构如下
/home
|--my-project
|--test1
|--index.html
|--static
8.启动nginx
[plain] view plain copy
service nginx start
9.至此项目部署成功，在浏览器下输入: 即可
结语：以上就是首席CTO笔记为大家整理的关于djangoapivue如何部署的相关内容解答汇总了，希望对您有所帮助！如果解决了您的问题欢迎分享给更多关注此问题的朋友喔～