錯(cuò)誤

用nginx做vue3+vite2代理的時(shí)候出現(xiàn)了以下的報(bào)錯(cuò)

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.

原因

經(jīng)檢查，出現(xiàn)這種狀況是因?yàn)槲业捻?xiàng)目二級(jí)目錄和nginx轉(zhuǎn)發(fā)的目錄不匹配。 在nginx配置中，我是這樣寫的

location /h5-page {
  try_files $uri $uri/ /jd-h5/index.html last;
}

而在vite配置中，我將base設(shè)置為h5-page;

export default defineConfig(({ mode }) => ({
  base: '/h5-page/',
}));

由于我轉(zhuǎn)發(fā)的location和目錄的base都設(shè)置為h5-page，但是我卻實(shí)際上將打包好的文件放在了jd-h5這個(gè)目錄中，這讓nginx無(wú)法準(zhǔn)確定位到文件因而產(chǎn)生了上述的報(bào)錯(cuò)；

解決方法

解決方法也很簡(jiǎn)單，將不匹配的部分修正即可，我將目錄重命名為h5-page，然后修改nginx配置。

location /h5-page {
  try_files $uri $uri/ /h5-page/index.html last;
}

總結(jié)

用二級(jí)目錄托管項(xiàng)目，如果不想造成混淆和報(bào)錯(cuò)的話，應(yīng)當(dāng)嚴(yán)格遵照 目錄-轉(zhuǎn)發(fā)地址-項(xiàng)目base 統(tǒng)一的寫法。