如何在不修改路由器选项的情况下配置 NuxtJS 构建以自定义文件路径？答案

【问题标题】：How to configure NuxtJS build to customize file paths without modifying router options?如何在不修改路由器选项的情况下配置 NuxtJS 构建以自定义文件路径？
【发布时间】：2021-08-31 14:34:00
【问题描述】：

我使用 NuxtJS 开发了一个 SPA (ssr: false)。构建后，javascript 和 css 文件的文件路径是相对于域的根文件夹而不是 dist 文件夹。例如<script src="/_nuxt/e247009.js"></script> 导致浏览器抛出错误

“来自“url”的资源由于 MIME 类型（“text/html”）不匹配（X-Content-Type-Options: nosniff）而被阻止。”

我的urlcss fonts-face里面的路径也有这个问题。

我可以使用这个解决方案https://stackoverflow.com/a/61638555/8488702 解决错误，方法是像这样设置路由器选项：

router: {
  base: './'
}

但是现在出现了另一个问题，那就是当我加载位于项目根目录中的 index.html 时，nuxt 路由器显示错误

找不到此页面

如何在不更改路由器选项的情况下自定义文件路径以使路由器不会中断？

【问题讨论】：

路由器基础可以是'/'。为什么不使用您的 dist 文件夹作为根目录？
@HansFelixRamos 这是导致 mim 类型错误的默认值
这可能是服务器错误，您使用的是本地服务器吗？
@HansFelixRamos 是的，这些错误发生在本地环境中。现在我将 dist 文件夹内容上传到服务器的根目录，它工作正常。你能解释一下为什么会这样吗？谢谢你。
对于生产，您确实需要构建（使用yarn generate 或yarn build），因此您需要为生成的dist 目录提供服务。不知道为什么你在本地环境中有任何错误（使用yarn dev 对吗？）但是IMO，你的错误完全与任何路径无关。而且，/_nuxt/e247009.js 路径完全没有问题，这来自位于.nuxt 目录中的 Webpack 缓存版本。 MIME 类型的问题主要是在您提供的格式不符合预期时引起的。

标签： javascript vue.js nuxt.js

【解决方案1】：

OP 使用他的 Webstorm IDE 运行该项目，认为target: 'static' 将允许它在本地环境中工作。即使由于生成了实际的静态文件（这些文件确实可以托管在 CDN 上）而适用于生产环境，现代开发也没有那么简单。

因此，我们确实需要使用内置的webpack-dev-server 本地服务器来支持现代开发的所有强大功能（HMR、文件散列、SASS 等...）。

运行yarn dev（或npm run dev）将允许一个正常工作的项目，由 Nuxt 核心团队为您完成已配置的 Webpack v4 配置。

【讨论】：

我认为你误解了我的意思。我打开了 dist 文件夹中的 index.html，它在服务器上运行良好，但在本地服务器上却不行。（dist 文件夹中的文件不是“实际静态文件”吗？
@amirify 您打算在每次更新单个文件时构建整个应用程序？如前所述，它适用于生产（也就是如果你构建它）。如果要运行本地服务器，则需要运行 webpack。
当然不是。我只是想知道为什么构建的文件在本地环境中不起作用。
@amirify 如果你在这里尝试我的回购：github.com/kissu/so-date-fns-calendar 你可以yarn generate 它。然后，在 CLI 中转到 /dist，用 VScode 打开它（重要的是在 /dist 目录中打开 VScode，而不是在根项目中！），使用 Live Server 扩展（marketplace.visualstudio.com/…），你应该到达使用>Live Server: Open with Live Server 运行我的应用程序的完整静态版本。我很确定 Webstorm 也可以做到这一点！这几乎也是 Netlify/Vercel 正在做的事情，因为它是完全静态的。