Error during run Vue application on portal.Azure

[wojciechfpga]

Hi. I created my Vue-Vite app. Then I created repository on dev.azure. 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.

Page do not appear but successfully loading:

My vite.config.js file:

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'
    }
  }
})

My web.config file:

<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>

[LinusBorg]

A deployed application should have been built/bundled (with Vite), and thus not reference .vue files.

• Are you running a Vite dev server on Azure? that's not meant to be done.
• Or are you just trying to consume the app directly files from hosted plain source files? that's also not gonna work.

[wojciechfpga]

Thanks for reply!
This is my main.js file:

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')

So how to avoid using vue file? ("import App...)? I using Azure App Service - Node 18 LTS - Windows. I created instance of such App Serivce and in "Deployment Center" I connected it to my repository.

[LinusBorg]

You seem to need to read the Vite documentation

It covers the dev server, building for production and deployment.

If you run vite as a node server on azure, you are doing the wrong thing.

[wojciechfpga]

LinusBorg - you are right - i deployed it as Azure Blob Storage and it work