Django webpack loader vuejs+typescript Отказано в выполнении скрипта, поскольку его MIME-тип ('text/html') не является исполняемым
Я использую 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: '/'
})
]
};
моя конфигурация typescript:
{
"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>
Можете ли вы помочь мне решить эту проблему?