#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;
Можете ли вы помочь мне решить эту проблему ?