在 NuxtJS 构建中自定义文件路径而不更改路由器选项：分步指南

Question

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

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

我的 url css fonts-face 内的路径也有这个问题。

我可以使用此解决方案 https://stackoverflow.com/a/61638555/8488702 通过设置路由器选项来解决错误，如下所示：

router: {
  base: './'
}

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

找不到该页面

如何在不更改路由器选项的情况下自定义文件路径，以免路由器损坏？

Answer 1

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

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

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