Javascript 对IE11的Nuxt和Vue支持
在Vue和Nuxt中实现的应用程序中支持IE11有问题。该应用程序使用Tailwind CSS库 我用创建了polyfill,但没有解决问题。我对它进行了更多的调查,发现node_模块的源代码没有传输到ES5标准(尤其是与Tailwind库相关的代码)。我尝试了几种解决办法,但都没有解决我的问题。我将transfile属性添加到nuxt.config.js,但添加后出现错误:Javascript 对IE11的Nuxt和Vue支持,javascript,vue.js,nuxt.js,Javascript,Vue.js,Nuxt.js,在Vue和Nuxt中实现的应用程序中支持IE11有问题。该应用程序使用Tailwind CSS库 我用创建了polyfill,但没有解决问题。我对它进行了更多的调查,发现node_模块的源代码没有传输到ES5标准(尤其是与Tailwind库相关的代码)。我尝试了几种解决办法,但都没有解决我的问题。我将transfile属性添加到nuxt.config.js,但添加后出现错误:无法分配给对象“#”的只读属性“exports”。我还尝试添加@nuxt/babel预设应用程序,但也没有帮助我 我当前发
无法分配给对象“#”的只读属性“exports”
。我还尝试添加@nuxt/babel预设应用程序,但也没有帮助我
我当前发行的图片:
这是我的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'],
}
这是使用ESM和CJS时最常见的错误: 答复: 我认为您不应该像在配置中那样
require
postss插件。见文件:
我建议你改用这个。因此,您不必担心设置。它还添加了
numxt purgecss
模块 你找到解决办法了吗?我遇到了IE11到的问题,可能需要大力支持