關於vite build后訪問報錯：Expected a JavaScript module script but the server responded with a MIME type.

問題描述:

• vite 項目 build 部署后在瀏覽器中訪問出現以下報錯：

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

解決方案:

上述問題的原因在於：項目build后沒有找到正確的靜態資源路徑，解決如下

// vite.config.js目錄下，修改內容如下：
export default viteConfig = {
    base: '/'
}

原文：https://www.codeleading.com/article/34945983820/ 

 

我的項目中出現的問題

 

根本原因如上，項目中已經配置了這個base路徑，接着項目中還出現了一個問題

當項目在已經在線上打開，然后在jenkins上重新打包部署之后，在頁面不刷新的情況下，切換項目的菜單，依然會報這個錯

原因是，之前打包引入的地址xxxx.js的content-type:application/script,而重新打包部署之后，在未刷新頁面的情況下，js引入的依然是原先的地址，且content-type：text/html，導致報上述的錯誤

 

 

 

解決方式是：監聽error，監聽之后，提示刷新頁面，在入口的index.html中

var showConfirm = true;
    var errorListener;
    if (window.addEventListener) {
      errorListener = window.addEventListener(
        'error',
        function (t) {
          console.log('t:', t);
          if (!t.message) {
            if (t.target.as === 'script' && showConfirm) {
              showConfirm = false;
              if (window.confirm('資源加載異常，請點擊確定按鈕刷新頁面!')) {
                errorListener = null;
                window.removeEventListener('error', null);
                window.location.reload();
              }
            }
            var r,
              n = (r = t.target ? t.target : t.srcElement) && r.outerHTML;
            n && n.length > 200 && (n = n.slice(0, 200));
            var a = {
              type: 'resourceError',
              target: {
                outerHTML: n,
                src: r && r.src,
                tagName: r && r.tagName,
                id: r && r.id,
                className: r && r.className,
                name: r && r.name,
                type: r && r.type
              }
            };
            // TODO：埋點日志上報
            return;
            if (a.target.src && window.XMLHttpRequest) {
              var u = new XMLHttpRequest();
              u.open('OPTIONS', a.target.src);
              u.send();
              u.onload = function (e) {
                200 !== e.target.status && ((a.target.status = e.target.status), (a.target.statusText = e.target.statusText)), f(a);
              };
            }
          }
        },
        !0
      );
    }

 

 

與package.js同級，新建一個server.js

const express = require('express');
const path = require('path');
const { createProxyMiddleware: proxy } = require('http-proxy-middleware');
const compression = require('compression');

const app = express();
const port = process.env.PORT || 8001;
// 修改port PORT=3999 && node server.js

const targetPath = 'dist';

app.use(compression());
// 基於http協議講解Cache-Control在服務中的應用
// https://zhuanlan.zhihu.com/p/43414403
app.use((req, res, next) => {
  // 將 index.html 設為 no-cache
  if (req.url == '/') {
    res.setHeader('Cache-control', 'no-cache');
  }
  next();
});

app.use(
  express.static(path.join(__dirname, targetPath), {
    etag: false,
    maxAge: 1000 * 60 * 60 * 24 * 365 // 緩存一年
  })
);

app.get('/*', (req, res, next) => {
  if (req.url.startsWith('/api')) return next();
  res.status(404);
  res.sendFile(path.join(__dirname, targetPath, 'index.html'));
});

app.use(
  proxy('/api', {
    changeOrigin: true,
    ws: true,
    secure: false,
    target: 'http://smart-sadb.sec.wanmei.com'
  })
);

app.listen(port);
console.log('服務已開啟');
console.log(`http://localhost:${port}`);