泊头市网站制作公司/网络营销策划活动方案

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

环境

升级vue@next

脚手架：vue-cli
vue:2.6.11

更新脚手架

脚手架如果存在全局安装

npm i @vue/cli -g

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

npm i @vue/cli-service -D

然后使用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

不需要内容，直接删除

项目变更

全局设置

//阻止提示生产消息
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"}
];

产生报错信息

vue-router.esm-bundler.js?6c02:3181 Uncaught TypeError: Cannot read property 'location' of undefinedat 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

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

官网迁移指南说是：

"history": createWebHistory()
"hash": createWebHashHistory()
"abstract": createMemoryHistory()

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

createRouter({history: createWebHistory(),routes: [],
})
createRouter({history: createWebHashHistory(),routes: [],
})

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'

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

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

并且发现了一个现象

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

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

{path:"*",redirect: "/404"
}

变更为

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

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"}],]
};

添加.babelrc

{"plugins": [["import",  {"libraryName": "ant-design-vue", "libraryDirectory": "es", "style": true}]]
}

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

prop问题

warning.js?2149:6 Warning: `prop` is deprecated. Please use `name` instead.const zip=computed({get:()=>form.value.name,set:(val)=>{}})

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

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