報(bào)錯(cuò)內(nèi)容
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.
解決方法
router文件
// 創(chuàng)建路由
export const router = createRouter({
// 在這里傳入項(xiàng)目打包目錄
history: createWebHistory('/demo/'),
routes: constantRoutes
})
vite.config.ts
nginx.conf
配置中路徑apps是我自建的存放前端頁(yè)面的文件夾
起關(guān)鍵作用的是try_files $uri $uri/ /demo/index.html，當(dāng)然上面項(xiàng)目文件夾demo也需保持一致
- alias 后面的路徑是Vue項(xiàng)目打包后dist靜態(tài)文件服務(wù)器存放路徑，一般在nginx下面建一個(gè)文件夾存放
- tryfiles 后面的index.html路徑與創(chuàng)建路由和vite.config.ts配置里面的base保持一致即可，可以多級(jí)目錄
- location 后面的路徑與index.html上級(jí)目錄保持一致即可
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-515910.html
2023-11-28補(bǔ)充：在上述情況下訪問項(xiàng)目public下的文件
1.加載圖片
<el-row style="text-align: center;margin-top: 20px;">
<el-col v-for="item in imageList" :span="8">
<div class="demo-image__preview">
<el-card class="box-card" style="padding: 0px;">
<el-image style="width: 200px; height:200px" :src="item" :zoom-rate="1.2" :max-scale="7"
:min-scale="0.2" :preview-src-list="imageList" :initial-index="4" fit="cover" />
</el-card>
</div>
</el-col>
</el-row>
// 批量獲取文件夾下的圖片
const imageList = ref<any>([])
onMounted(() => {
// handleSelect('0', [])
const list: any = import.meta.glob("@/assets/images/*.png", { eager: true })
for (const image in list) {
// console.log("image", image)
imageList.value.push(getImgUrl(image))
}
})
// 生成圖片訪問路徑，url為public下的路徑，不包括public
const getImgUrl = (url: string) => {
return new URL(import.meta.env.VITE_BASE_PATH + url, import.meta.url).href
}
上述代碼提到的VITE_BASE_PATH 配置在env.development和env.production里面
面報(bào)錯(cuò)空白,Vue,Vite,nginx,javascript,前端](https://imgs.yssmx.com/Uploads/2023/07/515910-4.png)
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-515910.html
到了這里，關(guān)于解決Vue3+Vite3 打包部署到nginx后配置非根目錄刷新頁(yè)面報(bào)錯(cuò)空白的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
