Nuxt和Vue对IE11的支持

我在Vue和Nuxt中实现的应用程序中支持IE11时遇到问题。该应用程序使用Tailwind CSS库。

我用polyfill.io创建了polyfill，但是并没有解决问题。我进行了更多调查，发现node_modules源代码未转换为ES5标准（尤其是与Tailwind库相关的代码）。我尝试了几种解决方案，但都没有解决我的问题。我在nuxt.config.js中添加了transpile属性，但添加后发生了错误：Cannot assign to read only property 'exports' of object '#<Object>'。我也尝试添加@ nuxt / babel-preset-app，但这也没有帮助。

我当前问题的图像：https : //ibb.co/4FCcKMy

这是我的nuxt.config.js：

const path = require('path')
const root = path.resolve(__dirname)
const features = [
    'fetch',
    'Object.entries',
    'IntersectionObserver',
].join('%2C')

module.exports = {
    mode: 'universal',
    router: {
        middleware: 'authMiddleware',
    },

    serverMiddleware: [
        { path: '/health', handler: '~/middleware/healthMiddleware.js' },
    ],

    /*
    ** Headers of the page
    */
    head: {
        title: 'Helloprint',
        htmlAttrs: {
            lang: 'en-IE',
        },
        meta: [
            { 'http-equiv': 'X-UA-Compatible', content: 'IE=edge' },
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            { hid: 'robots', name: 'robots', content: 'index,follow' },
            { hid: 'description', name: 'description', content: 'Helloprint' },
            { hid: 'ogSiteName', name: 'og:site_name', content: 'Helloprint' },
            { hid: 'ogType', name: 'og:type', content: 'website' },
        ],
        link: [
            { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
            { rel: 'manifest', href: '/manifest.json' },
            { rel: 'preconnect', href: 'https://ipa.elev.io', crossorigin: 'anonymous' },
            { rel: 'dns-prefetch', href: 'https://ipa.elev.io', crossorigin: 'anonymous' },
            { rel: 'preconnect', href: 'https://sheet-to-api.herokuapp.com', crossorigin: 'anonymous' },
            { rel: 'dns-prefetch', href: 'https://sheet-to-api.herokuapp.com', crossorigin: 'anonymous' },
            { rel: 'preconnect', href: 'https://zendesk-chat.herokuapp.com', crossorigin: 'anonymous' },
            { rel: 'dns-prefetch', href: 'https://zendesk-chat.herokuapp.com', crossorigin: 'anonymous' },
            { rel: 'preconnect', href: 'https://cdn.jsdelivr.net', crossorigin: 'anonymous' },
            { rel: 'dns-prefetch', href: 'https://cdn.jsdelivr.net', crossorigin: 'anonymous' },
        ],
        script: [
            {
                src: '/zendeskchat/chat.min.js',
                type: 'text/javascript',
                defer: true,
            },
            {
                src: `https://polyfill.io/v3/polyfill.min.js?features=${features}`,
                body: true,
            },
        ],
    },

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

    /*
    ** Global CSS
    */
    css: [
        '@/assets/scss/main.scss',
    ],

    /*
    ** Plugins to load before mounting the App
    */
    plugins: [
        '~/plugins/i18n.js',
        '~/plugins/vue-instantsearch.js',
        { src: '~/plugins/directives.js', ssr: false },
        '~/plugins/globals.js',
        { src: '~/plugins/vue-shortkey.js', ssr: false },
        { src: '~/plugins/vue-observe-visibility.js', ssr: false },
        '~/plugins/vuelidate.js',
        { src: '~/plugins/elevio.js', ssr: false },
        '~/plugins/axios.js',
        '~/plugins/api.js',
        { src: '~/plugins/cssLazyLoad.js', ssr: false },
        { src: '~/plugins/persistedState.js', ssr: false },
    ],

    /*
    ** Nuxt.js modules
    */
    modules: [
        // Doc: https://axios.nuxtjs.org/usage
        '@nuxtjs/axios',
        'portal-vue/nuxt',
        '@nuxtjs/router',
        'cookie-universal-nuxt',
    ],

    env: require('./scripts/runtime'),

    /*
    ** Axios module configuration
    */
    axios: {
        // See https://github.com/nuxt-community/axios-module#options
    },

    /*
    ** Build configuration
    */
    build: {
        /*
        ** You can extend webpack config here
        */
        extend(config, ctx) {
            config.resolve.alias['@root'] = root
            // config.hotMiddlewareOptions = {
            //     path: 'localhost:3000/__webpack_hmr'
            // }

            config.module.rules = config.module.rules.map((rule) => {
                if (!rule.oneOf) {
                    return rule
                }

                const newRule = rule

                newRule.oneOf.map((r) => {
                    if (!r.use.some(l => l.loader === 'sass-loader')) {
                        return r
                    }

                    const newLoaders = r

                    newLoaders.use = newLoaders.use.reduce((loaderAcc, loader) => {
                        if (loader.loader !== 'sass-loader') {
                            return [...loaderAcc, ...[loader]]
                        }

                        return [...loaderAcc, ...[{
                            loader: 'fast-sass-loader',
                            options: loader.options,
                        }]]
                    }, [])

                    return newLoaders
                })

                return newRule
            })
        },
        quiet: false,
        splitChunks: {
            layouts: true,
            pages: true,
            commons: true,
        },
        extractCSS: true,
        optimizeCss: {
            cssProcessorPluginOptions: {
                preset: [
                    'default',
                    {
                        discardComments: {
                            removeAll: true,
                        },
                    },
                ],
            },
        },
        postcss: {
            plugins: [
                require('postcss-import')(),
                require('tailwindcss')('./tailwind.config.js'),
                require('autoprefixer')(),
            ],
        },
        babel: {
            presets({ isServer }) {
                return [
                    [
                        '@nuxt/babel-preset-app',
                        {
                            targets: isServer
                                ? { node: 'current' }
                                : { browsers: ['last 2 versions'], ie: 11 },
                        },
                    ],
                ]
            },
        },
        transpile: ['tailwindcss'],
    },

    render: {
        bundleRenderer: {
            shouldPreload: (file, type) => {
                return ['script', 'style', 'font'].includes(type)
            },
        },
    },

    generate: {
        minify: {
            collapseWhitespace: false,
        },
    },

    vendor: ['axios', 'vue-instantsearch'],
}