dist中的资源在生产中无法正常工作

Question

我整天都发现了这个问题，最终陷入困境并需要帮助，在部署到Surge之后，我用Next generate生成了我的Web应用程序，我的所有Web都是混乱的，似乎CSS根本无法正常工作并且图像也无法阅读，然后我尝试再次部署到GitLab Pages，它仍然是相同的，我不知道为什么虽然我已经整天在这里找到解决方案并尝试了很多事情，但找不到它完全没有解决这个问题可能很棘手吗？

这是我的nuxt.config.js

  mode: 'universal',

  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: process.env.npm_package_description || ''
      }
    ],
    script: [
      {
        src: 'https://kit.fontawesome.com/77777.js',
        crossorigin: 'anonymous'
      }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      {
        rel: 'stylesheet',
        href:
          'https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700&display=swap'
      },
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Quando&display=swap'
      },
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Palanquin&display=swap'
      }
    ]
  },

  loading: { color: '#fff' },

  generate: {
   dir: 'public',
  },

  css: [
    '~/assets/css/main.css',
    '~/assets/css/input.css',
    '~/assets/css/animate.css'
  ],

  plugins: [
    { src: '~/plugins/agile.js', mode: 'client' },
    { src: '~/plugins/model-gltf.js', mode: 'client'},
  ],

  router: {
    middleware: ['router'],
    base: '/myapp/'
  },

  buildModules: [
  ],

  modules: [
    'bootstrap-vue/nuxt',
    '@nuxtjs/axios'
  ],

  axios: {
    baseURL: "http://myapi"
  },

  build: {
    extend(config, ctx) {

    }
  }
}

Answer 1

您可以尝试将模式设置为静态

  mode: "static",

然后键入npm run build

它现在应该生成一个名为“ dist”的文件夹

您从文件夹dist中获取所有内容，并将其上传到您的服务器上