Загрузчик Django webpack vuejs typescript Отказался выполнять скрипт из-за того, что его тип MIME («текст/html») не является исполняемым

#django #typescript #webpack #django-webpack-loader

#джанго #машинописный текст #веб-пакет #django-веб-пакет-загрузчик

Вопрос:

Я использую 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"  ] }  

In 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',  } }  

and my index.html:

 {% load render_bundle from webpack_loader %} {% load static %} lt;!DOCTYPE htmlgt; lt;html lang="en"gt;  lt;headgt;  lt;meta charset="utf-8"gt;  lt;meta http-equiv="X-UA-Compatible" content="IE=edge"gt;  lt;meta name="viewport" content="width=device-width,initial-scale=1.0"gt;  lt;link rel="icon" href="lt;%= BASE_URL %gt;favicon.ico"gt;  lt;titlegt;Medtourismlt;/titlegt;  lt;/headgt;  lt;bodygt;  lt;noscriptgt;  lt;stronggt;We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.lt;/stronggt;  lt;/noscriptgt; lt;div id="app"gt;lt;/divgt; {% render_bundle 'app' %} lt;!-- built files will be auto injected --gt; lt;/bodygt; lt;/htmlgt;  

Можете ли вы помочь мне решить эту проблему ?