Nuxt.js static 网站相关网址

Question

I've created a new static Nuxt.js project. All the urls and paths to resources are absolute ie / . Is there an easy way to use relative urls and paths ./ ?

I have a few assumptions (I'm a Java dev):

• Static Nuxt.js projects do not require a web server.
• /file.js is intended to be served by a web server.

The projects purpose is reading data (json files) locally and displaying the processed data (hence no web server). I'm going to add fancy graphs, forms etc... Am I using the wrong approach?

I've spent a long time googling this and I've never seen a decent answer.

Here is my nuxt.conf.js config.output.publicPath = './_nuxt/' seems to do half a job. It works works for <script src="./_nuxt/936eba5.js"></script> but not <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: ''
  // }
}

---

EDIT with more information.

_nuxt is the default path/url that is in /dist .

I've only generated a project at this point and tried to make the urls relative.

/dist

• 200.html
• README.md
• _nuxt
• favicon.ico
• index.html
• inspire

So removing config.output.publicPath = './_nuxt/' . Using ssr: true . Then running npm run generate

These absolute url/paths are generated:

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

It's been raised as a bug many times in Nuxt.js Github but I've never seen an actual resolution.

Answer 1

If you want to load some JSONs into your Nuxt app, you should use nuxt-content . I've actually created a boilerplate here that you can check: https://github.com/kissu/nuxt-tailwind-typography-darkmode-boilerplate

You can find 2 articles in /content/articles . There, you can see how to fetch then and how to display them.

Full static Nuxt do not require any server indeed. You can even SSR ( ssr: true ) it and still have it as target: static .

publicPath is not the right thing here. It should not be used, neither should you use any of the following: _nuxt , .nuxt or alike.
yarn generate , then deploy your /dist directory to a simple free platform, like Netlify and you'll be gucci. You can try my project if you want (beware, there is more configuration than neeed in your case).

If you want to add something to your head , please follow this documentation: https://nuxtjs.org/docs/2.x/features/meta-tags-seo

Answer 2

Nuxt.js doesn't appear to support relative urls (see above). However Vue3 and Vite does.

Reproduction steps:

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

output:

@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: './'
})