Django webpack loader vuejs+typescript Refused to execute script from 因为其MIME类型（'text/html'）不可执行

Question

我在我的应用程序中使用 Django 作为后端，使用 Vue3 作为前端。在开发服务器中我没有问题，但现在在生产中我在呈现页面时遇到问题。我已按照所有文档进行操作，但找不到解决方案。

我正在使用 django-webpack-loader 渲染我使用 webpack5 形成的包。但是现在我收到一个错误，因此认为 django 正在尝试呈现 fallback 页面。

Refused to execute script from 'https://medtourism.uk/app-a7abdc6b502c1335fd69.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

我的webpack.config.js

module.exports = {
   mode:'production',
   entry:{
    app: path.resolve(__dirname, './src/main.ts'),
   },
   output: {
     filename: '[name]-[hash].js',
     path: path.resolve(__dirname, './assets/dist'),
     clean: true,
   },
   module: {
      rules: [
        {
          test: /\.vue$/,
          use: 'vue-loader'
        },
        {
          test: /\.ts$/,
          loader: 'ts-loader',
          options: {
            appendTsSuffixTo: [/\.vue$/],
          }
        },
        {
          test: /\.css$/i,
          use: [ "style-loader", "css-loader"],
        },
        {
          test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
          // More information here https://webpack.js.org/guides/asset-modules/
          type: "asset",
        },
      ]
    },
    resolve: {
      extensions: ['.ts', '.js', '.vue', '.json'],
      alias: {
        'vue': '@vue/runtime-dom',
        'bulma': 'bulma/css/bulma.css',
      }
    },
   plugins: [
    new VueLoaderPlugin(),
     new BundleTracker({
        filename: './webpack-stats.json',
        publicPath: '/'
      })
   ]
 };

我的打字稿配置：

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "module": "es2015",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noLib": false,
    "sourceMap": true,
    "strict": true,
    "strictPropertyInitialization": false,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es2015",
    "baseUrl": "."
  },
  "exclude": [
    "./node_modules"
  ],
  "include": [
    "./src/**/*.ts",
    "./src/**/*.vue"
  ]
}

在 Django 中：

WEBPACK_LOADER = {
    'DEFAULT': {
        'CACHE': not DEBUG,
        'BUNDLE_DIR_NAME': 'dist/',  # must end with slash
        'STATS_FILE': '/home/ytsejam/public_html/medtourism/medtourism/frontend/webpack-stats.json',
        'POLL_INTERVAL': 0.1,
        'TIMEOUT': None,
        'IGNORE': [r'.+\.hot-update.js', r'.+\.map'],
        'LOADER_CLASS': 'webpack_loader.loader.WebpackLoader',
    }
}

和我的 index.html:

{% load render_bundle from webpack_loader %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>Medtourism</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
<div id="app"></div>
{% render_bundle 'app' %}
<!-- built files will be auto injected -->
</body>
</html>

你能帮我解决这个问题吗？

Answer 1

此错误消息的通常原因是，当浏览器尝试加载该资源时，服务器 return 改为 HTML 页面，例如，如果您的路由器捕捉到未知路径并显示没有 404 错误的默认页面。当然，这意味着路径不 return 预期的 CSS 文件/图像/图标/任何东西。

为确保您处于这种情况，请复制路径并尝试在新浏览器 window 或标签页中直接访问它。您将看到服务器发送的内容。

就是说，检查您的配置，也许还有 github 上的集成示例，例如这个 https://github.com/tmpbook/django-with-vuejs

Django webpack loader vuejs+typescript Refused to execute script from 因为其MIME类型（'text/html'）不可执行

Django webpack loader vuejs+typescript Refused to execute script frombecause its MIME type ('text/html') is not executable

django

typescript

webpack

django-webpack-loader