django+vue前后端分离项目 部署 Ubuntu服务器

原创 119阅读 · 时间2019年7月26日 12:14

1.打包vue项目

我用的是vue-cli脚手架,打包后会在前端项目中多出来一个dict文件夹。

现在,可以双击 dict/index.html 打开先预览一下。

    常见错误:

1.打开项目后,一片空白。 

        原因:打开F12调试工具,在控制台中会看到静态资源找不到。

        解决办法:配置vue项目,相对资源地址改为 ./  (默认是 /  , 所以才找不到我们的静态资源)

image.png


2. 打开项目后,还是一片空白

    已经按照第一种情况来操作过了,并且 没有静态资源 找不到,那肯定就是你在coding的时候路由模式改为了 ‘history’;(默认为 hash, 比较丑)

   解决办法:

          ①. 把路由修改为history的地方改成默认的。

image.png

        ②. 需要后端支持了。 详情请见  官方文档

           我们用 nginx服务器来举例:

location / {
  try_files $uri $uri/ @router;
  index index.html;
}
 
location @router {
   rewrite ^.*$ /index.html last;
}



前端打包后木的问题了,来,配置后端 + 前端


  1. 把刚才打包好的dict文件夹 复制到 咱django后端的项目中的 templates文件中去。

   2.  ① 配置 django后端 显示页面为咱dict文件夹下的index.html

              1. 在django项目根目录下,找到 总 urls.py文件, 添加这两句:

from django.views.generic.base import TemplateView
url(r'^$', TemplateView.as_view(template_name="index.html")),

           2. 在setting.py文件中指定html位置:

 image.png

           指定html文件在哪个文件夹下(咱的是在根templates文件夹下)


           不出意外的话,现在运行django项目 就可以访问到首页面了。     

            出意外的话,还是静态资源没找到。


     ② 配置静态资源

           1. 还是在django项目 根目录下 的总urls.py 文件,添加:

from django.views static
from onlie_word settings
url(r'^static/(?P<path>.*)$', static.serve, {'document_root': settings.STATIC_ROOT}, name='static'),

完整的urls.py 应该是这样的:

image.png

      














           2. 在setting.py中 设置静态资源位置:

STATIC_URL = STATIC_ROOT = os.path.join(BASE_DIR)
STATICFILES_DIRS = []

就这样:

image.png

           3. 如果还不行的话(一般也是不行,哈哈) 来 接着走

              找打你的html文件,我的是在根项目templates文件下 的dict文件下,然后就按图片这样 设置一下就好了。

image.png


在本地测试运行,已经可以正常访问了。





是时候把项目跑在服务器上了。

这时候的部署 和 正常的部署没什么区别。

    1.打包项目到服务器。

    2. 安装所需要的环境。

    3.配置uwsgi

    4. 配置 nginx

    然后就可以正常访问了。不会部署的话参考: django部署到Ubuntu服务器 

来看一下我部署到服务器上的配置吧:

文件目录:image.png


uwsgi 配置: image.png


nginx 配置:image.png





END  如有错误和建议,请评论区指出.  会一步步完善。



评论

本站升级中... 如有好的建议请加入QQ群!

相关文章推荐 ?
近七日热文推荐 !
回到顶部