刨析django----django+vue项目部署

laufing

已于 2022-05-04 22:50:00 修改

阅读量3.6k

点赞数

分类专栏： python web 后端框架文章标签： python django vue linux

于 2022-05-02 15:29:55 首次发布

本文链接：https://blog.csdn.net/weixin_45228198/article/details/124540557

版权

本文详细介绍了如何打包Vue项目并将其与Django结合，包括两种方案：将Vue静态资源放入Django并配置静态文件和模板，以及在Django根目录创建frontend目录。接着，文章阐述了如何将Django部署到公网，包括购买云服务器、登录、配置环境、拷贝项目和启动服务。在部署过程中，特别提到了uWSGI和nginx的配置问题。

摘要由CSDN通过智能技术生成

打包Vue项目

需将Vue项目打包为静态资源，放入django项目中，具体方法如下：

方案1

打包Vue项目

打包之前，需要将axios请求的ip地址改为公网IP或者目标主机IP

# 项目目录下
npm run build

会生成一个dist目录，内部就是静态文件；如下： “vue”: “^2.6.11”
在这里插入图片描述
ico图标，加载不到，就放入static目录

生成的index首页：
必须修改静态文件的路径，以/static/开头

另外，有的vue版本会生成一个static目录和index.html，只需将static复制到django目录，并配置静态文件即可。

# 防止index.html也在static目录中
module.exports = {
   
  assetsDir: 'static',// 静态资源打包输出目录 (js, css, img, fonts)，相应的url路径也会改变
};

配置django端

按照以上要求，将vue静态文件放入django对应的位置。
配置django的静态文件路径

# settings.py
STATIC_URL = "/static/"
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)

配置django的templates模板
根目录下，创建一个templates目录，并配置模板路径

# 配置模板
TEMPLATES = [
    {
   
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, "templates")],
        ...

配置首页路由

# 主路由中
from django.views.generic import TemplateView

path("", TemplateView.as_view(template_name="index.html"))

访问测试
在浏览器中输入http://localhost:8000

可以看

最低0.47元/天解锁文章