Question

我创建了一个项目，将Django作为后端，将Vue js作为前端。最初，我使用node.js在一台服务器（8000）上运行Django，在另一台（8080）上运行Vue js。然后，通过在vue.config.js中进行代理更改，将二者都集成到同一服务器上。然后，我在终端上运行命令NPM RUN BUILD，然后将dist文件夹移至Django的静态文件夹进行渲染。这在本地开发环境中工作得很好，但是在通过git-hub将项目部署到Azure Web服务中时，我遇到了404错误的静态文件错误。感谢您的任何修复或建议。

这是我的settings.py文件。我也尝试过评论STATIC_ROOT


STATIC_URL = '/static/'


# Vue assets directory (assetsDir)
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

这是我的vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '^/api/': {
        target: 'http://127.0.0.1:8000/api/',
        ws: false,
      }
    }
  },
  // outputDir must be added to Django's TEMPLATE_DIRS
  outputDir: './dist/',
  // assetsDir must match Django's STATIC_URL
  assetsDir: 'static',
  publicPath: '',
  baseUrl: '',
}

Here is my project file structure

Here is the error in my console

Answer 1

如果您在生产服务器上运行，则静态文件的服务与开发服务器的服务不同。必须在主要网址和设置中进行其他更改。文件link

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # your url patterns
] 

# for serving static files
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
# for serving media files (files that were uploaded through your project application)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

显然，您必须在项目STATIC_URL文件中添加STATIC_ROOT，MEDIA_URL，MEDIA_ROOT，settings.py。

此外，您需要在设置python manage.py collectstatic之后运行STATIC_ROOT。文档link 1和link 2

404-在Azure Web服务中部署Django和Vue js集成项目时，静态文件出现文件未找到错误

1 个答案: