场景:有个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

  • 在当前的项目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')的整个目录, 打包时间会长些, 但是好用。