时间戳

首页 > 解决方案 > dist 中的资源在生产中无法正常工作

vue.js - dist 中的资源在生产中无法正常工作

问题描述

我整天都发现这个问题，最后卡住了，需要帮助，我生成了我的网络应用程序，Next generate然后部署到 Surge，我所有的网络都很乱，似乎 CSS 根本不起作用，图像无法读取另外，然后我尝试再次部署到GitLabPages，它仍然是一样的，我不知道为什么虽然我已经在这里找到解决方案并尝试了很多东西，但根本找不到它可能会很棘手解决这个问题 ？？

这是我的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) {

    }
  }
}

标签： vue.jsvuejs2nuxt.jsserver-side-rendering

解决方案

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

  mode: "static",

然后输入npm run build

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

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

推荐阅读