Nuxt.js 静态站点相对 url

Question

我创建了一个新的静态 Nuxt.js 项目。所有资源的 url 和路径都是绝对的，即/。有没有简单的方法来使用相对 url 和路径./？

我有几个假设（我是 Java 开发人员）：

• 静态 Nuxt.js 项目不需要 Web 服务器。
• /file.js 旨在由网络服务器提供服务。

该项目的目的是在本地读取数据（json 文件）并显示处理后的数据（因此没有 Web 服务器）。我要添加精美的图表、表格等……我是不是用错了方法？

我在谷歌上搜索了很长时间，但从未见过像样的答案。

这是我的 nuxt.conf.js config.output.publicPath = './_nuxt/' 似乎完成了一半的工作。它适用于<script src="./_nuxt/936eba5.js"></script>，但不适用于<link rel="preload" href="/_nuxt/936eba5.js" as="script">

export default {
  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
  ssr: false,

  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'my-app',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/typescript
    '@nuxt/typescript-build',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/buefy
    'nuxt-buefy',
  ],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    extend (config, { isDev, isClient }) {
      if (!isDev) {
        // relative links, please.
        config.output.publicPath = './_nuxt/'
      }
      return config;
    }
  },

  // router: {
  //   base: ''
  // }
}

---

编辑更多信息。

_nuxt 是/dist 中的默认路径/url。

此时我只生成了一个项目，并尝试使网址相对。

/dist

• 200.html
• README.md
• _nuxt
• favicon.ico
• index.html
• 启发

所以删除config.output.publicPath = './_nuxt/'。使用ssr: true。然后运行npm run generate

这些绝对 url/路径是生成的：

<link rel="preload" href="/_nuxt/42fc731.js" as="script">
<script src="/_nuxt/42fc731.js" defer></script>

它在 Nuxt.js Github 中被多次作为错误提出，但我从未见过真正的解决方案。

Answer 1

如果你想将一些 JSON 加载到你的 Nuxt 应用程序中，你应该使用nuxt-content。我实际上在这里创建了一个样板文件，您可以查看：https://github.com/kissu/nuxt-tailwind-typography-darkmode-boilerplate

您可以在/content/articles 中找到 2 篇文章。在那里，您可以看到如何获取它们以及如何显示它们。

完全静态的 Nuxt 确实不需要任何服务器。您甚至可以使用 SSR (ssr: true) 并将其保留为 target: static。

publicPath 在这里不是正确的。不应该使用它，也不应该使用以下任何一种：_nuxt、.nuxt 或类似名称。
yarn generate，然后将您的 /dist 目录部署到一个简单的免费平台，例如 Netlify 和你会成为古奇。如果您愿意，可以尝试我的项目（请注意，您需要的配置多于您的情况）。

如果您想向您的head 添加内容，请遵循此文档：https://nuxtjs.org/docs/2.x/features/meta-tags-seo

Answer 2

Nuxt.js 似乎不支持相对 url（见上文）。但是 Vue3 和 Vite 可以。

复制步骤：

npm install vue@next
npm install -g @vue/cli
npm init @vitejs/app my-app

输出：

@vitejs/create-app
Ok to proceed? (y) y
✔ Select a framework: · vue
✔ Select a variant: · TypeScript

cd my-app
npm install
npm run build

vite.config.ts

import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base: './'
})