Nuxt static目录下Netlify CMS脚本Webpack打包及MIME类型错误咨询

问题原因 #

你遇到的报错本质是浏览器请求的JS文件不存在，服务器返回了404页面（类型为text/html），而非MIME规则配置错误：
Nuxt默认不会对static目录下的文件做编译打包处理，你放在该目录下的cms/index.js里的import导入语法没有经过Webpack处理，浏览器直接请求对应相对路径资源时找不到文件，触发404报错。你之前添加的空Webpack规则没有将该文件纳入构建流程，所以无效。

解决步骤 #

1. 调整文件存放位置 #

将static/cms/整个目录移动到项目根目录的assets/js/路径下（没有对应目录直接新建即可），需要打包的源码不能放在static目录中。

2. 修改nuxt.config.js配置 #

在build.extend中添加额外入口配置，指定将cms相关代码打包后输出到目标路径：

build: {
  extend(config, { isDev, isClient }) {
    // 仅在客户端构建时生效
    if (isClient) {
      // 新增cms打包入口
      config.entry = {
        ...config.entry,
        'admin/cms': './assets/js/cms/index.js'
      }
      // 固定cms打包后的文件名，避免带hash导致引用路径失效
      config.output.filename = ({ chunk }) => {
        if (chunk.name === 'admin/cms') {
          return '[name].js'
        }
        return isDev ? '[name].js' : '[name].[contenthash:7].js'
      }
      config.output.chunkFilename = isDev ? '[name].js' : '[name].[contenthash:7].js'
    }
  }
}

3. 修改admin页面的引入路径 #

修改static/admin/index.html里的JS引入语句：

<script type="module" src="/admin/cms.js"></script>

4. 清理冗余文件 #

删除原来的static/cms/目录，避免路径冲突。修改后重启Nuxt服务即可生效，所有cms相关的依赖会自动打包到单文件中。

内容的提问来源于stack exchange，提问作者Jarrod