Analysis and sorting of bug solutions for vue2 upgrade vue3 issues

1. Problems encountered when still using vue2 writing

'codeArr' does not exist on type 'CreateComponentPublicInstance<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, {}, {}, false, {}, {}, OptionTypesType<{}, {}, {}, {}, {}, {}>, ... 5 more ..., {}>'.

56 |   computed: {
    57 |     isBtnDis() {
  > 58 |       return  === 6;
       |                   ^^^^^^^
    59 |     }
    60 |   },

Solution

All the return values ​​of computed attributes in computed must indicate the return type

Change to:

computed: {
  isBtnDis(): boolean  {
    return  === 6;                    
  } 
},

Wrong writing method

Solution:

Change to:

computed: {
    ...mapGetters({ isalive: "alive" })
  },

or

computed: {
    ...mapGetters("alive")
  },

2. Problems encountered when using vue3's setup writing method

1. Call the value name in computed to add .value

for example:

setup(){
    const isBtnDis = computed(()=>{
        return return  === 6;
    })
    ()
}

Three. Where vue3 is incompatible with vue2

1. Correct way to write route redirection in Vue3

{
    path: "/:pathMatch(.*)*",
    redirect: "/home"
}

or

{
    path: "/:pathMatch(.*)",
    redirect: "/home"
}

or

{
    path: "/:catchAll(.*)",
    redirect: "/home"
}

2. Configure postcss-pxtorem, the design drawing size is 375px. The writing method before postcss-pxtorem was rootValue:37.5, but the converted size is particularly small. The page looks like it is on a tablet or PC. After testing, it was found that it was changed to rootValue:16 or viewportWidth:375. It will be almost no different from rootValue:37.5 before the upgrade.

const { defineConfig } = require("@vue/cli-service");
const autoprefixer = require("autoprefixer");
const pxtorem = require("postcss-pxtorem");
 = defineConfig({
  publicPath: "./",
  outputDir: "dist",
  transpileDependencies: true,
  lintOnSave: false,
  productionSourceMap: false,
  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            autoprefixer({
              overrideBrowserslist: ["Android >= 4.0", "iOS >= 7"]
            }),
            pxtorem({
              viewportWidth: 375,
              propList: ["*"]
            })
          ]
        }
      }
    }
  }
});

The above is the detailed content of the problem solving encountered when upgrading vue2 to vue3. For more information on solving the problem solving of vue2 to vue3, please pay attention to my other related articles!