Django部署含Webpack打包Vue.js脚本的静态HTML时JS内容异常

这个问题我之前也碰到过，核心原因是你的路由配置把所有请求都导向了indexView，包括静态资源的请求——这就是为什么浏览器拿到的JS文件内容和index.html一模一样。下面是具体的解决步骤：

1. 修正URL路由配置 #

你的urls.py里url(r'^', indexView)的正则表达式^会匹配所有请求（因为任何URL都以空字符串开头），所以不管是访问根路径还是/js/myvuejs.bundle.js，Django都会返回index.html的内容。

你需要把静态资源的路由放在最前面，确保静态文件请求先被正确处理，再匹配根路径的视图。修改后的urls.py如下：

from django.conf import settings
from django.conf.urls.static import static
from django.urls import path
from .views import indexView

urlpatterns = [
    # 开发模式下配置静态资源路由，优先匹配静态文件请求
    *static(settings.STATIC_URL, document_root=settings.STATIC_ROOT),
    # 根路径匹配indexView，使用Django 2.0+推荐的path语法
    path('', indexView),
]

2. 确保静态文件路径正确 #

• 把你的myvuejs.bundle.js文件放到static/js/目录下（对应settings.py里的STATIC_ROOT路径）。
• 修改index.html里的JS引用路径，确保指向正确的静态资源地址：

  <script src="/static/js/myvuejs.bundle.js"></script>
  

3. 验证settings.py配置 #

你的settings.py里的静态配置基本没问题，但注意STATIC_ROOT是部署时收集静态文件的目录，开发模式下STATICFILES_DIRS用来指定额外的静态文件目录。如果你的静态文件都直接放在static/目录下，当前配置是可以的，但确保DEBUG=True（开发模式下默认开启），这样Django会自动处理静态文件的服务。

原理说明 #

当浏览器请求/static/js/myvuejs.bundle.js时，现在会先被static()生成的路由匹配，Django会直接从STATIC_ROOT目录里读取对应的JS文件返回；只有当请求不匹配任何静态资源路由时，才会走到indexView返回index.html，这样就不会出现静态资源被错误返回成HTML的问题了。

内容的提问来源于stack exchange，提问作者David Torrey