Dav*_*don 18 nuxt.js nuxt-edge
在Nuxt中1.4.2,我有以下内容nuxt.config.js:
build: {
vendor: ['babel-polyfill'],
babel: {
presets: [
['vue-app', {
useBuiltIns: true,
targets: { ie: 11, uglify: true },
},
],
],
},
},
似乎所有这些都在Nuxt中被打破了2.0.至少我希望polyfill足以让IE 11正常工作.这是我尝试过的:
删除build.babel允许构建过程工作:
build: {
vendor: ['babel-polyfill'],
},
但我认为 build.vendor现在只是被忽略了,所以这似乎什么都不做.
我尝试添加:
script: [
{ src: 'https://cdn.polyfill.io/v2/polyfill.min.js' },
],
对我head,以及:
render: {
resourceHints: false,
},
禁用preload提示(我不确定这是否重要).这会导致页面看起来正确 - polyfill.min.js在所有其他脚本之前加载.不知何故,当我在ie11上测试时,Object.entries未定义且页面爆炸.
Dav*_*don 19
以下是我升级到nuxt的步骤2.2.0,并让我的应用程序使用必要的polyfill 在IE 11上运行.您的体验可能会有所不同,具体取决于您安装的软件包.
步骤1
删除build.vendor和build.babel从nuxt.config.js.
build.vendor已弃用.我尝试调整build.babel,因为nuxt文档表明它默认使用vue-app.我认为它实际上是使用babel-preset-env.这与其他工具一起依赖于browserslist,它具有一些合理的默认值.我没有更改我的browserslist配置,但您可以通过关注他们的文档.
第2步
升级或更换导致构建问题的任何模块.当我升级时,@nuxtjs/apollo通过其中一个依赖项遇到了转换问题.这已经解决了,但我最终切换到vue-apollo+,apollo-boost因为它更适合我的项目.
第3步
为任何额外功能添加polyfill core-js不提供,但目标浏览器需要.您应该能够在测试目标时根据控制台中抛出的任何异常来确定这些内容.
我使用polyfill.io添加以下内容nuxt.config.js:
const features = [
'fetch',
'Object.entries',
'IntersectionObserver',
].join('%2C');
head: {
script: [
{ src: `https://polyfill.io/v3/polyfill.min.js?features=${features}`, body: true },
],
},
注意:我已经包含
body: true了将脚本移出head页面部分的内容.但是,它将在您的任何应用程序代码之前插入.注意:
IntersectionObserver建议用于链接预取.
您可以使用构建器创建类似的URL .请注意,一旦选择了一个特征,构建器将自动选择default,这是(据我所知)在功能上等同于附带的polyfill core-js.因为core-js当前不是可选的(无论如何你都要发货),所以不包括default来自的集合是有意义的polyfill.io.
有关polyfills的深入讨论以及为什么polyfill.io可能是一个好主意,请参阅此文章.简短版本是它只根据浏览器的UA加载客户端实际需要的东西.
最后,您需要测试您的应用程序,以查看在给定浏览器中成功执行所需的其他功能(如果有).您可能需要多次重复此过程,直到所有错误都消失为止.确保在多个页面上进行测试,因为并非所有页面包都具有相同的要求.
结论
虽然上述的某些方面是特定于应用程序的,但希望这可以帮助您朝着正确的方向前进.最重要的一点是,没有一个解决方案 - 你仍然需要在目标浏览器中测试以验证代码是否执行.
我尝试了上述所有方法，但没有任何效果。但是，我发现我可以通过创建一个插件并将其添加到 nuxt.config.js 来使我的代码与 IE11 一起使用，如下所示：
// nuxt.config.js
plugins: [
{ src: '~/plugins/polyfills', mode: 'client' },
],
// 插件/polyfills.js
import 'core-js/fn/object/entries'
import 'core-js/fn/array/includes'
import 'core-js/fn/array/find'
import 'core-js/fn/array/from'
import 'core-js/es6/promise'
import 'core-js/fn/object/assign'
import 'core-js/es6/symbol'
import 'whatwg-fetch'
我删除了任何特殊的 babel 配置。这就是全部。我知道这意味着我的代码将始终运行 polyfill，但没有 3rd 方依赖项（例如 polyfill.io）。您可以根据需要编辑所需的 polyfill 列表。希望这可以帮助某人！
您也可以使用nuxt-polyfill模块。
npm install nuxt-polyfill
将模块添加到您的nuxt.config.js：
export default {
// Configure polyfills:
polyfill: {
features: [
/*
Feature without detect:
Note:
This is not recommended for most polyfills
because the polyfill will always be loaded, parsed and executed.
*/
{
require: 'url-polyfill' // NPM package or require path of file
},
/*
Feature with detect:
Detection is better because the polyfill will not be
loaded, parsed and executed if it's not necessary.
*/
{
require: 'intersection-observer',
detect: () => 'IntersectionObserver' in window,
},
/*
Feature with detect & install:
Some polyfills require a installation step
Hence you could supply a install function which accepts the require result
*/
{
require: 'smoothscroll-polyfill',
// Detection found in source: https://github.com/iamdustan/smoothscroll/blob/master/src/smoothscroll.js
detect: () => 'scrollBehavior' in document.documentElement.style && window.__forceSmoothScrollPolyfill__ !== true,
// Optional install function called client side after the package is required:
install: (smoothscroll) => smoothscroll.polyfill()
}
]
},
// Add it to the modules section:
modules: [
'nuxt-polyfill',
]
}
免责声明：我做到了。
| 归档时间： |
|
| 查看次数： |
9603 次 |
| 最近记录： |