在门户上部署Vue应用程序后出错。Azure

问题描述 投票:0回答:1

我创建了我的 Vue-Vite 应用程序。然后我在 dev.azure - Web App 上创建了存储库。接下来我将其部署在portal.azure.com 上。修复了一些错误后,我仍然不知道如何修复这个错误:

main.css:1 无法加载模块脚本:需要 JavaScript 模块脚本,但服务器以 MIME 类型“text/css”进行响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。 router/:1 无法加载模块脚本:需要 JavaScript 模块脚本,但服务器以 MIME 类型“text/html”进行响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。

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

应用程序配置:

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

我尝试通过这个主题来解决我的问题: 无法加载模块脚本:需要 JavaScript 模块脚本,但服务器以 MIME 类型“text/html”进行响应。严格的 MIME 类型

没有结果。 我想看看我的页面。 (现在是默认的 vue 页面) - 我对页面代码做了一些更改,主要是在 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>

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

如何解决?为什么会出现这个错误?

azure vue.js vuejs3 vite azure-webapps
1个回答
0
投票

您可能想尝试更改

vite.config.js
中的以下行:

 base: './',

 base: '/',
© www.soinside.com 2019 - 2024. All rights reserved.