惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

月光博客
月光博客
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
N
Netflix TechBlog - Medium
大猫的无限游戏
大猫的无限游戏
爱范儿
爱范儿
Martin Fowler
Martin Fowler
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
The Register - Security
The Register - Security
IT之家
IT之家
博客园_首页
Microsoft Security Blog
Microsoft Security Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
博客园 - 三生石上(FineUI控件)
I
InfoQ
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
Jina AI
Jina AI
Apple Machine Learning Research
Apple Machine Learning Research
M
MIT News - Artificial intelligence
博客园 - Franky
C
Check Point Blog
T
The Blog of Author Tim Ferriss
V
Visual Studio Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
T
Tailwind CSS Blog
Recent Announcements
Recent Announcements
云风的 BLOG
云风的 BLOG
美团技术团队
The Cloudflare Blog
Y
Y Combinator Blog
H
Hackread – Cybersecurity News, Data Breaches, AI and More
MyScale Blog
MyScale Blog
The GitHub Blog
The GitHub Blog
D
DataBreaches.Net
Google DeepMind News
Google DeepMind News
V
V2EX
aimingoo的专栏
aimingoo的专栏
GbyAI
GbyAI
G
Google Developers Blog
S
SegmentFault 最新的问题
Hugging Face - Blog
Hugging Face - Blog
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
U
Unit 42
罗磊的独立博客
量子位
MongoDB | Blog
MongoDB | Blog
Last Week in AI
Last Week in AI
Stack Overflow Blog
Stack Overflow Blog
小众软件
小众软件
D
Docker
人人都是产品经理
人人都是产品经理

博客园 - 一丝心情

Volta 安装和使用指南 免费国产ai试用总结 glb格式3d模型压缩 nuxt.js 项目流水线自动部署设置 免费的云数据库 vue 实用指令 IntelliJ IDEA license server 激活(亲测有效) win10/win11专业版激活码(亲测有效) Git 常用指令完全指南 npm 安装依赖报错整理 css3文字渐变, svg文字渐变 http/https与websocket的ws/wss的关系 指令 v-tooltip vue 自定义指令实现v-overflow-tooltip element-ui NavMenu 多级嵌套封装 常用css vue.config.js config.resolve.alias 目录别名配置 three.js 在低版本浏览报THREE.WebGLProgran: shader error 报错解决办法 常用软件历史版本下载 前端常用指令 数组常用方法总结 vue 中 echarts 添加事件 常用正则
nuxt 低版本浏览器兼容babel编译配置
一丝心情 · 2022-10-20 · via 博客园 - 一丝心情

  场景:有个nuxt开发的老项目,需要在(Firefox52.7.2)低版本浏览上显示,低版本浏览器打开报错(SyntaxError: invalid property id),然后各种尝试网速搜到的兼容方法依旧没解决,最后在不断尝试下得到了以下解决方案↓↓↓。

  方法一:配置 transpile

    在nuxt.config.js build.transpile 配置需要编译依赖库的名称,可以是字符串或者正则(此方法适用于知道具体需要编译的依赖的情况

const NUXT_CONFIG = {
  server: {},
  env: {},
  head: {},
  build: {
    transpile: [
        /^element-ui/,
      '@nuxtjs/axios',
      '@nuxtjs/pwa',
      '@nuxtjs/style-resources',
      'qs',
      'koa',
      'nuxt',
      'nuxt-vuex-localstorage',
      'installComponentsJS',
      //.....等需要编译的依赖
    ],

  }
}    

  方案二:使用babel-loader

  1. 在当前的项目node_modules/@nuxt/webpack/package.json 里查找确定 @babel/core、babel-loader的版本号,然后在项目根路径下的package.json 里的dependencies下添加

    @babel/core(版本号与node_modules/@nuxt/webpack/package.json 里@babel/core 的版本号一致),

    @babel/preset-env(版本号与node_modules/@nuxt/webpack/package.json 里@babel/core 的版本号一致),

    babel-loader(版本号与node_modules/@nuxt/webpack/package.json 里babel-loader 的版本号一致),

    然后删除node_modeules, 使用 npm install  或 yarn install  重新安装依赖。 或者也可以直接  npm install -D babel-loader@版本号 @babel/core@版本号 @babel/preset-env@版本号  安装指定版本的依赖。  

    

  2.注释掉根路径下的 babel.config.js的配置(如果没有就不用管)
    

  3.修改nuxt.config.js, 如果知道不兼容的具体插件名称,include可以在写成 include: [ resolve('node_modules/插件名')] 

const NUXT_CONFIG = {
  server: {},
  env: {},
  head: {},
  build: {

    //transpile: [/^element-ui/],
    /*
    ** You can extend webpack config here
    */
    extend (config, { isDev, isClient }) {
      config.module.rules.push(
      {
        test: /\.m?js$/,
        include: [
          resolve('node_modules')
        ],
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      })
    },
  }
}

然后重新启动项目,不报错的话就算可以了, 我的的项目场景是一个其他人开发遗留的老项目是,所以就直接resolve('node_modules')的整个目录, 打包时间会长些, 但是好用。