当我在 css 和 js 文件 url 上部署 nuxt static 应用程序时出错

Question

I develop a Nuxt static app and I have a trouble when I generate the app. When I am using locally I don't have any problem with "npm run dev", but when I upload the code to the Amazon S3 bucket or use "npm run start" in my routes load the incorrect url for the js and css files for example: Locally for style.css file the app load "/css/style.css" this URL is correct but for another route I need the same url but the app create another url for the css or js files and don't found it, the incorrect url is for example "/xxxxxxx/css/style.css", Does anyone have an idea why this happens?

the app structure is:

/assets
/components
/css
/js
/images
/layouts
/pages
   /index.js -->"here doesn't have any problem"
   /preguntasFrecuentes.js  -->"Here is the problem"
/static
...

This is my nuxt.config.js :

export default {
  target: 'static',
  server: {
    host: '0.0.0.0', // default: localhost
    port: 3000, // default: 3000
  },
  components: true,
  head: {
    title: 'SirFunding',
    meta: [
      { charset: 'utf-8' },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0',
      },
      {
        hid: 'description',
        name: 'description',
        content: 'my website description',
      },
      { hid: 'X-UA-Compatible', content: 'IE=edge' },
      { name: 'facebook-domain-verification', content: 'm87opl945q79izhvirpbahxeb8qmbb' },
    ],
    link: [
      { href: 'css/bootstrap.css', rel: 'stylesheet' },
      { href: 'css/style.css', rel: 'stylesheet' },
      { href: 'css/responsive.css', rel: 'stylesheet' },
      { href: 'https://fonts.googleapis.com/css?family=Barlow Semi Condensed', rel: 'stylesheet' },
      { href: 'css/color-switcher-design.css', rel: 'stylesheet' },
      { rel: 'shortcut icon', href: 'images/icono.png', type: 'image/x-icon' },
      { rel: 'icon', href: 'images/icono.png', type: 'image/x-icon' },
    ],
  },
  modules: ['@nuxtjs/axios'],
  buildModules: ['@nuxtjs/moment'],
}

and when I start the app with npm run start or upload in production the app looks like this:

but when I start the app with npm run dev the app looks like this:

the problem I found is when I build the app their paths for the css and js files are created incorrectly like this:

in production o after to build the app adds in css or js files the name of the route in the url like this: http://192.168.0.15:3000/**preguntasFrecuentes**/js/color-settings.js or http://192.168.0.15:3000/**preguntasFrecuentes**/css/color-switcher-design.css and it is incorrect, the correct URL for both URLs are whitout preguntasFrecuentes . I try moving the css and js files but this does not solve the problem

the preguntasFrecuentes.vue code is:

<template>
  <div class="p-3 m-3 color_title1">
    <div class="p-2 col-sm-12 todos_text">
      <h2 class="text-center text-dark">Preguntas Frecuentes</h2>
    </div>
    <div>
      <div class="text-justify col col-12">
        <div id="preguntasfrecuentesAccordion" class="accordion">
          <SectionsFaqCard v-for="faq in faqs" :key="faq.id" :faq="faq"> </SectionsFaqCard>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import faq from '~/static/FAQ.json'

export default {
  data() {
    return {
      faqs: {},
    }
  },
  created() {
    this.faqs = faq.FAQ
  },
}
</script>

Answer 1

I want to comment that I found the solution for this issue and it was very simple only I added "/" in nuxt.confing.js in link part in the begining of the url like this:

export default {
    ...,
    link: [
       { href: '/css/bootstrap.css', rel: 'stylesheet' },
       { href: '/css/style.css', rel: 'stylesheet' },
       { href: '/css/responsive.css', rel: 'stylesheet' },
       { href: 'https://fonts.googleapis.com/css?family=Barlow Semi Condensed', rel: 'stylesheet' },
       { href: '/css/color-switcher-design.css', rel: 'stylesheet' },
       { rel: 'shortcut icon', href: 'images/icono.png', type: 'image/x-icon' },
    ],
  },
  ....
}

and for the js files I add the same '/' in the app.html file.