I created my Vue-Vite app. Then I created repository on dev.azure - Web App. Next I deployed it on the portal.azure.com. After fixing few error, i still have no idead how to fix this errors:
main.css:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec. router/:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
vite.config.js:
import{ fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
base: './',
resolve: {
alias: {
'@': '/src'
}
}
})
app.config:
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".vue" mimeType="text/javascript" />
<mimeMap fileExtension=".css" mimeType="text/css" />
</staticContent>
<rewrite>
<rules>
<rule name="VueJS" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/index.html" />
</rule>
</rules>
</rewrite>
<directoryBrowse enabled="true" />
</system.webServer>
</configuration>
I tried to solve my problem by this topic: Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type
no result. I want to see my page. (now it is default vue page) - I made few changes in in code of page, mainly in index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="importmap">
{
"imports": {
"pinia": "https://cdnjs.cloudflare.com/ajax/libs/pinia/2.1.7/pinia.esm-browser.min.js",
"vue":"https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.5/vue.esm-browser.prod.min.js"
}
}
</script>
<script type="module" src="./src/main.js">
</script>
</body>
</html>
and main.js:
import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')
How to solve it? Why this error occur?
You might want to try changing the following line in your
vite.config.js:to