nuxt 低版本浏览器兼容babel编译配置

标签：node 版本号 低版本 modules loader babel nuxt

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

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')的整个目录， 打包时间会长些， 但是好用。

 

 

标签：node,版本号,低版本,modules,loader,babel,nuxt
From： https://www.cnblogs.com/ysxq/p/16810126.html