vite3.0 + vue3 打包之后报错?

Question

Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

vite.config.ts 和配置什么的有关系吗？

import { defineConfig, splitVendorChunkPlugin, loadEnv } from 'vite';
import path from 'path';
import vue from '@vitejs/plugin-vue';
import postcssImport from 'postcss-pxtorem';
import commonjs from 'rollup-plugin-commonjs';
import externalGlobals from 'rollup-plugin-external-globals'; //lmw add 2
import { Plugin as importToCDN } from 'vite-plugin-cdn-import';
import viteCdnConfig from './vite.cdn.config';

export default ({ mode }) => {
  const isProd: boolean = ['production', 'staging'].includes(mode);
  const env = loadEnv(mode, process.cwd());
  const prodPlugins = isProd ? [importToCDN({ modules: viteCdnConfig })] : [];
  return defineConfig({
    // base: mode === 'production' ? '/zh-h5/' : '/zh-test-h5/',
    base: './',
    plugins: [vue(), splitVendorChunkPlugin(), ...prodPlugins],
    clearScreen: false,
    css: {
      postcss: {
        plugins: [
          postcssImport({
            rootValue: () => 37.5, // rootValue: ({ file }) => file.indexOf('vant') !== -1 ? 37.5 : 75
            unitPrecision: 6,
            selectorBlackList: ['html', 'body'],
            mediaQuery: false,
            propList: ['*'] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，这里设置为['*']全部，假设需要仅对边框进行设置
          })
        ]
      }
    },
    resolve: {
      alias: {
        '@': path.resolve('./src')
      }
    },
    server: {
      // base: path.resolve(__dirname, './public/index.html'),
      host: '0.0.0.0', // 开启IP输出访问
      port: Number(env.VITE_APP_PORT),
      open: true // 运行自动打开浏览器
      // proxy: {
      //   [env.VITE_APP_BASE_API]: {
      //     target: 'https://api.youlai.tech',
      //     changeOrigin: true,
      //     rewrite: path =>
      //       path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')
      //   }
      // }
    },
    build: {
      // outDir: mode === 'production' ? path.resolve('./dist') : path.resolve('./dist-test'),
      minify: 'terser',
      assetsDir: 'assets', //指定静态资源存放路径
      sourcemap: false, //是否构建source map 文件
      terserOptions: {
        compress: {
          drop_console: true, // 生产环境移除console
          drop_debugger: true
        }
      },
      rollupOptions: {
        external: ['vue', 'vue-router', 'vant', 'vue-demi', 'pinia', 'axios'],
        plugins: [
          commonjs(),
          externalGlobals({
            vue: 'Vue',
            'vue-router': 'VueRouter',
            'vue-demi': 'VueDemi',
            pinia: 'Pinia',
            vant: 'vant',
            axios: 'axios'
            // Cookies: 'js-cookie'
          })
        ],
        output: {
          chunkFileNames: 'static/js/[name]-[hash].js', // console.log(info.facadeModuleId);
          entryFileNames: 'static/js/[name]-[hash].js',
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
          format: 'es',
          //静态资源分拆打包
          manualChunks(id) {
            if (id.includes('node_modules')) {
              return id.toString().split('node_modules/')[1].split('/')[0].toString();
            }
          }
        }
      }
    }
  });
};

Answer 1

看错误，猜测是 mimetype 配置问题，服务器缺少配置，导致浏览器没有拿到合适的 mimetype，无法启动正确的解析功能。

你可以直接用命令行 curl 或者 wget 一下目标文件，看能否正常下载，验证路径。

如果是 nginx 的话，一般 include /etc/nginx/mime.types; 即可。其它服务器可以查文档。

Answer 2

声明了 type="module" 的 script 的标签，需要在返回头上声明 text/javascript

为了使模块可以在浏览器中正常地工作，你需要确保你的服务器能够正常地处理 Content-Type 头，其应该包含 JavaScript 的 MIME 类型 text/javascript。如果没有这么做，你可能会得到 一个严格 MIME 类型检查错误：“The server responded with a non-JavaScript MIME type（服务器返回了非 JavaScript MIME 类型）”，并且浏览器会拒绝执行相应的 JavaScript 代码。

相关文档
JavaScript 模块 - JavaScript | MDN