Error after deploy Vue application on portal.Azure

Question

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?

akseli · Accepted Answer · 2024-01-09 00:32:02Z

1

You might want to try changing the following line in your vite.config.js:

 base: './',

to

 base: '/',

answered Jan 9, 2024 at 0:32

akseli

3,0891 gold badge27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Error after deploy Vue application on portal.Azure

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related