[vue3.x]实战问题--vue2.x升级vue3.x遇到的问题

主要是记录一在使用vue，并且从vue2.x升级版本过程中遇到的问题，方便以后的查找

环境

升级vue@next

脚手架：vue-cli
vue:2.6.11
1
2

更新脚手架

脚手架如果存在全局安装

npm i @vue/cli -g
1

然后在项目中更新@vue/cli-service

npm i @vue/cli-service -D
1

然后使用vue update
查看当前项目需要更新插件(所有脚手架相关插件)，一路y更新所有列出的更新

运行项目，此时可以正常启动

vue 升级

package更新

npm i vue@next --save
npm i vuex@next --save
npm i vue-router@next --save
npm i @vue/compiler-sfc -D
1
2
3
4

不需要内容，直接删除

项目变更

全局设置

//阻止提示生产消息
Vue.config.productionTip = false;
Vue.config.productionTip 移除

router

迁移

router的原始设置

const routes = [
  {
    path: "/",
    redirect: "/index",
  },
  {
    path: "/index",
    name: "IndexPage",
    component: Index
  },
  {
    path: "/404",
    // route level code-splitting
    // this generates a separate chunk (404.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "404" */"../components/no-found.vue") //懒加载
  },
  {
    path: "/:pathMatch(.*)",
    redirect: "/404"
  }
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

产生报错信息

vue-router.esm-bundler.js?6c02:3181 Uncaught TypeError: Cannot read property 'location' of undefined
    at Object.install (vue-router.esm-bundler.js?6c02:3181)
    at Object.use (runtime-core.esm-bundler.js?5c40:2920)
    at eval (main.js?56d7:18)
    at Module../src/main.js (app.js:1263)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at Object.1 (app.js:1432)
    at __webpack_require__ (app.js:854)
    at checkDeferredModules (app.js:46)
    at app.js:994
1
2
3
4
5
6
7
8
9
10
11

该报错主要是因为router的设置有问题

官网迁移指南说是：

"history": createWebHistory()
"hash": createWebHashHistory()
"abstract": createMemoryHistory()
1
2
3

这个是指不同的方式对应的方法，但是在真正的去设置router使用的方式时

createRouter({
  history: createWebHistory(),
  routes: [],
})
createRouter({
  history: createWebHashHistory(),
  routes: [],
})
1
2
3
4
5
6
7
8

createRouter里的参数始终是history，不论采用的是何种路由方式，否则会报上述错误

router版本更新后还遇到以下问题

vue-router.esm-bundler.js:1 Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open 'D:\vue\vue3.x-cli\node_modules\vue-router\dist\vue-router.esm-bundler.js'
1

遇到该问题后直接重新启动后修复了

根据遇到该问题之前的操作考虑，可能是由于更新router版本导致的，所以重启后就恢复了正常

并且发现了一个现象

http://localhost:8080/gsdfgsfdg#/index
#之前，也就是hash随便加了东西仍会跳转

vue3.0使用的不匹配路径问题

{
  path:"*",
  redirect: "/404"
}
1
2
3
4

变更为

{
  path:"/:pathMatch(.*)*",
  redirect: "/404"
}
1
2
3
4

babel 的配置

删除babel配置文件 babel.config.js

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    [
      //按需加载js
      "import",
      {libraryName: "ant-design-vue", libraryDirectory: "es", style: true}
      // { libraryName: "Antd", libraryDirectory: "es", style: "css"}
    ],
  ]
};
1
2
3
4
5
6
7
8
9
10
11

添加.babelrc

{
    "plugins": [
        ["import",  {"libraryName": "ant-design-vue", "libraryDirectory": "es", "style": true}]
    ]
}
1
2
3
4
5

但是也可以继续使用之前的配置，使用之前的配置也不影响项目的正常运行

prop问题

warning.js?2149:6 Warning: `prop` is deprecated. Please use `name` instead.

    const zip=computed({
      get:()=>form.value.name,
      set:(val)=>{
      }
    })
1
2
3
4
5
6
7

错误提示：
chrome-extension://hillfcdicknhgccefgpmjgdjlabedaga/index.js net::ERR_FILE_NOT_FOUND

分析：
浏览器安装的vue的开发者工具无法正常解析vue项目导致的报错