我创建了我的 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')
如何解决?为什么会出现这个错误?
您可能想尝试更改
vite.config.js
中的以下行:
base: './',
到
base: '/',