我在Vue和Nuxt中实现的应用程序中支持IE11时遇到问题。该应用程序使用Tailwind CSS库。
我用polyfill.io创建了polyfill，但是并不能解决问题。我进行了更多调查，发现node_modules源代码未转换为ES5标准（尤其是与Tailwind库相关的代码）。我尝试了几种解决方案，但没有一个解决了我的问题。我在nuxt.config.js中添加了transpile属性，但添加后发生了错误：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'],
}
。我还尝试添加@ nuxt / babel-preset-app，但这也无济于事。
当前问题的图片： https://ibb.co/4FCcKMy
这是我的nuxt.config.js：
pthread_t thread[6];
int nArg;
int nThread = pthread_create(&thread[0], NULL, funcA, &nArg);
if(0 > nThread)
printf("failed");
else
printf("thread started: %ld", thread[0]);
答案 0 :(得分：0)
这是使用ESM和CJS时最常见的错误：
响应：https://github.com/webpack/webpack/issues/4039#issuecomment-273804003
我不认为您应该像在配置中一样requrie安装postcss插件。查看文档：{{3}}
我建议您改用https://nuxtjs.org/faq/postcss-plugins/#recommended-method。因此，您不必担心设置。并且还添加了nuxt-purgecss模块。 ;）