NUXT生成的子页面在访问时一直保持加载状态

Question

我在使Nuxt应用程序在NGINX上正常运行方面遇到了一些麻烦。因此，我有一个使用通用模式的NUXT应用，其中有2个页面 index 和 user 。我使用 npm run generate 生成页面>命令。生成的dist目录具有index.html和/user/index.html。

我的问题是，当我尝试访问用户页面时，用户页面只会继续加载，而当我尝试访问 nuxt-template.loc / user 时，用户页面不会停止，但是索引页面可以正常工作并加载预期的内容。

NUXT和Vue JS版本

nuxt-^ 2.5.1

vue-^ 2.6.10

以下是我的NGINX配置

server {
    listen 80;

    root /web/nuxt-template/dist;
    server_name nuxt-template.loc;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

NUXT配置

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
const pkg = require('./package')

module.exports = {
    mode: 'universal',

    /*
    ** Headers of the page
    */
    head: {
        title: pkg.name,
        meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            { hid: 'description', name: 'description', content: pkg.description }
        ],
        link: [
            { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
            {
                rel: 'stylesheet',
                href: 'https://fonts.googleapis.com/css?family=Lato|Montserrat|Open+Sans|Material+Icons'
            }
        ]
    },

    /*
    ** Customize the progress-bar color
    */
    loading: { color: '#fff' },

    /*
    ** Global CSS
    */
    css: ['~/assets/style/app.styl'],

    /*
    ** Plugins to load before mounting the App
    */
    plugins: [
        '@/plugins/vuex',
        '@/plugins/vuetify',
        '@/plugins/vue-filters',
        '@/plugins/vue-methods'
    ],

    /*
    ** Nuxt.js modules
    */
    modules: [
        // Doc: https://axios.nuxtjs.org/usage
        '@nuxtjs/axios',
        '@nuxtjs/pwa'
    ],
    /*
    ** Axios module configuration
    */
    axios: {
    // See https://github.com/nuxt-community/axios-module#options
    },

    /*
    ** Build configuration
    */
    build: {
        transpile: ['vuetify/lib'],
        plugins: [new VuetifyLoaderPlugin()],
        loaders: {
            stylus: {
                import: ['~assets/style/variables.styl']
            }
        },

        /*
        ** You can extend webpack config here
        */
        extend(config, ctx) {
            // Run ESLint on save
            if (ctx.isDev && ctx.isClient) {
                /*config.module.rules.push({
                    enforce: 'pre',
                    test: /\.(js|vue)$/,
                    loader: 'eslint-loader',
                    exclude: /(node_modules)/
                })*/
            }
        }
    }
}