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

打包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端

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

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

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

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

4. 配置首页路由

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

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

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

可以看